什么 ? 你 们 的 教程 都 从 0 开始 ? 起 点 太 高 了 ! 明摆着 不 想 让 人 看 懂 ! 
我 们 从 -1 开始 ! 


Monday, Aug 6 | & 85°F 


Using Android Pie to Learn Android Development 


Android 9 编程 通俗 演义 


牛 扩 x 


du... 源 代码 it 21 PA 4 出 版 社 


Adaptive 


Anaroid 9 
Ze TE JE CES M. 


^t dg c 


TELERI: 


Jb X 


内 容 简 介 


本 书 严格 参考 Android 9 官方 开发 文档 的 逻辑 ， 全 面 讲解 Android 开发 中 的 各 种 技术 ， 章 节 内 容 循 序 渐 
进 ， 精 心安 排 ， 翔 实 全 面 ， 且 又 通俗 易 懂 ， 既 不 是 术语 的 罗列 ， 也 不 是 不 知 所 云 的 翻译 。 

本 书 分 为 18 章 , 内 容 包 括 配 置 Android 9 开发 环境 、 第 一 个 App. UI 资源 与 Layout、 各 种 Layout 控件 、 
代码 操作 控件 、Activity 导航 、Theme、Fragment、 菜 单 、 动 画 、 自 定义 控件 、RecyclerView、 模 仿 QQApp 
界面 、 实 现 聊天 界面 、 多 线程 、 网 络 通信 、 异 步调 用 库 RxJava、 实 现 聊天 功能 等 。 

本 书 适合 Android 编程 初学 者 、Android 应 用 开发 人 员 ， 也 适合 高 等 院 校 和 培训 学 校 相 关 专 业 的 师 生 教 
学 参考 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 《CIP) 数据 


Android 9 编程 通俗 演义 / 牛 搞 著 .一 北京 ; 清华 大 学 出 版 社 ，2019 
ISBN 978-7-302-52393-2 


I. QA-- II. 四 牛 … 了 H. 移动 终端 一 应 用 程序 一 程序 设计 IV. (OTN929.53 


中 国 版 本 图 书馆 CIP 数据 核 字 (2019) 第 038774 号 


责任 编辑 : ME 
封面 设计 : £ 5] 
责任 校对 : 闫 秀 华 
责任 印 制 : 刘海 龙 


出 版 发 行 : 清华 大 学 出 版 社 
网 Hb: http://www.tup.com.cn, http://www.wqbook.com 
地 è xb: 北京 清华 大 学 学 研 大 厦 A 座 邮 ” 编 : 100084 
社 总 机 : 010-62770175 邮 W: 010-62786544 
投稿 与 读者 服务 : 010-62776969, c-service@tup.tsinghua.edu.cn 
质量 反馈 : 010-62772015, zhiliang@tup.tsinghua.edu.cn 


印 装 者 : 三 河 市 龙 大 印 装 有 限 公 司 

经 $: 全 国 新 华 书店 

JF ”本 : 190mmx260mm E] — 3K: 28 字 $: 717 FF 

版 ”次 : 2019 年 4 月 第 1 版 ED 次 : 2019 年 4 月 第 1 次 印刷 
定 价 : 89.00 元 

产品 编号 : 082568-01 


Dill 


BY 


目 从 10S 横 衬 出世， 移动 应 用 开发 持续 火爆 ， 人 才 需 求 量 节 节 人 攀升 ， 开 有 友人 员 的 薪资 也 
勇 攀高 峰 。 但是, 随 着 一 批 跨 平 台 移动 开发 框架 (如 基于 JavaScript 的 PhoneGap ~ React Native, 
基于 .Net 的 Xarmain 等 ) 的 出 现 ， 企 业 对 10S 与 Android 原生 开发 的 需求 量 下 降 ， 其 实 大 家 在 
招聘 网 站 上 就 可 以 感受 到 相关 职位 的 减少 . 然而 ， 所谓 的 跨 平 台 移 动 开发 其 实 是 个 大 坑 ! 原因 
很 简单 : 没有 一 个 操作 系统 愿意 与 其 他 的 系统 兼容 、 统 一 。 比 如 Android 与 OS， 即使 它们 在 
不 停 地 互相 学 习 ， 功 能 越 来 越 相似 ,但 是 它们 的 开发 语言 、SDK、API 等 不 论 在 哪个 层面 都 绝 
不 兼容 。 所 以 当 使 用 跨 平 台 框 架 开 发 同时 兼容 10S 和 Android 的 App 时 ， 就 会 踩 到 很 多 坑 。 
更 悲 催 的 是 ,一旦 某 个 操作 系统 升级 了 ,你 使 用 的 框架 可 能 马上 会 出 现 兼容 性 问题 ， 你 可 以 等 
待 框架 开发 者 把 这 个 问题 修正 ， 但 不 知 何 年 何 月 ， 实 在 等 不 了 ， 你 只 能 上 自己 修正 问题 ， 于 是 你 
需要 对 这 个 框架 的 底层 很 熟悉 ， 并 且 还 要 同时 熟悉 10S 与 Android 的 原生 开发 ， 也 就 是 说 ， 你 
买 了 一 个 复杂 的 工具 ,你 需要 用 它 做 两 样 不 同 的 产品 ， 你 既 需 要 学 习 如 何 使 用 这 个 工具 ， 还 要 
学 习 这 两 个 产品 的 制作 流程 ， 还 要 学 会 修理 和 改进 这 个 工具 ， 有 点 恐怖 啊 ! 当然 这 可 以 娄 练 你 
的 能 力 ， 让 你 成 为 牛人 中 的 牛人 ， 但 是 这 会 拖延 开发 进度 ， 你 的 老板 能 接受 吗 ? 

最 近 出 现 了 很 多 反思 这 些 框 架 的 声音 , 而 且 已 经 有 国外 公司 放弃 React Native 的 事件 发 生 ， 
同时 我 在 各 技术 群 中 感受 到 Android 和 10S 开发 的 招聘 数量 比 过 去 两 年 有 明显 的 增加 , 这 都 说 
明 大 家 正在 回归 原生 开发 。 当 然 我 不 是 在 完全 否定 路 平台 开发 框架 ， 它 们 有 它们 的 适应 场景 ， 
比如 一 个 电子 商城 App， 只 提供 商品 展示 、 拍 照 、 收 藏 、 购 物 等 常见 功能 ， 跨 平台 框架 是 完全 
能 胜任 的 ， 但 问题 是 ， 你 依然 需要 熟悉 原 生 开 发 ， 才 能 用 好 跨 平 台 开 发 框架 ! 本 书 讲 的 就 是 
Android 原生 开发 的 故事 ， 情 节 跌 宕 起 伏 ， 一 波 三 折 ， 相 信 你 会 喜欢 。 


作者 心声 


如 何 才能 轻松 学 会 一 门 开 发 技术 ?估计 这 个 问题 很 多 人 部 思考 过 , 因为 学 技术 或 者 说 研究 
技术 真 的 很 难 ! (是 不 是 说 出 了 大 家 的 心声 ?) 大 家 应 该 都 有 感受 : 真正 掌握 一 门 开 发 技术 其 
实 需 要 很 长 时 间 。 即 使 你 是 一 只 长 期 浸 淫 各 种 技术 的 “千年 老 妖 ”， 给 你 一 门 陌生 的 技术 ， 你 
还 是 会 感受 到 入 门 的 痛 苗 , 你 虽然 了 解 各 种 模式 、 玩 过 各 种 知识 , 但 是 你 就 是 无 法 在 短 时 间 内 
真正 参透 它 。 

为 什么 会 这 样 ? 原因 很 简单 : 技术 本 来 就 是 复杂 的 ! 但 大 家 经 单 会 听 到 有 人 说 ， 厅 茶 开 发 
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很 简单 ， 怎 样 怎样 做 就 行 了 ， 随 便 学 学 就 会 了 …… 这 种 鬼话 ， 谁 信 谁 上 当 ! 因为 你 真正 动手 使 
用 它 时 , 发 现 几乎 一 步 一 个 坑 ! 实际 存在 这 样 一 个 规律 : 仅 学 习 如 何 使 用 一 门 技术 而 不 真正 搞 
懂 其 原理 ,你 是 不 会 用 这 门 技术 的 ， 那个 说 简单 的 人 ， 因 为 他 已 经 完全 掌握 了 这 项 技术 , 但 他 
忘 了 他 入 门 时 所 花费 的 脑力 、 时 间 以 及 经 受 的 痛 苗 。 

我 说 技术 本 来 就 复杂 ， 可 能 有 人 和 不服, 但 我 相信 你 仔细 思考 之 后 ， 就 会 同意 这 个 观点 。 一 
项 技术 可 能 用 一 句 话 就 能 说 清楚 它 的 用 途 或 概括 它 的 原理 , 但 当 你 真正 运用 它 时 , 你 就 会 发 现 
里 面 隐藏 了 无 数 的 细节 ,而 且 它 还 依赖 很 多 其 他 的 技术 ,你 要 一 步 步 跨越 这 些 沟 沟 坎 坎 ， 填 平 
你 的 技术 洼地 ， 才 能 俘获 它 。 

日 是 ， 学 习 技 术 难 ， 把 技术 用 文字 讲 明 白 更 难 ! 我 到 现在 也 没 读 到 能 让 我 轻 轻 松 松 看 明白 
一 门 技术 的 书 。 尤 其 对 于 基础 差 的 人 来 说 ， 他 们 喜欢 凑热闹 买 很 多 “技术 名 著 ”， 但 最 终 发 现 
能 看 懂 的 内 容 窒 窗 无几 ! 

AMT AA BOR-BAB NIE ZA MEETS 我 想 有 三 方面 的 主要 原因 : 一 是 技术 黑 话 (就 是 术语 ) 
太 多 ; 二 是 没有 为 读者 补 齐 知 识 差 距 ， 作 者 只 在 自己 的 高 度 上 讲 啊 讲 ， 读 者 可 能 跟 你 隔 着 一 层 
R; 三 是 太 多 概括 和 抽象 ， 把 人 整 得 云 里 筋 里 。 

所 以 ， 我 尝试 改变 技术 书 藉 中 的 这 些 问题 ， 写 一 本 老少 皆 宜 、 童 奥 无 欺 、 雅 俗 共 赏 的 书 ， 
为 大 家 讲 明白 一 门 复杂 而 庞大 的 技术 :Android 开发 。 本 书 对 读者 的 知识 基础 也 仅 要 求 会 用 Java 
语言 , 希望 大 家 读 起 来 轻 轻 松 松 。 在 书 中 作者 尽量 以 通俗 的 语言 讲述 各 种 概念 ,每 个 技术 点 都 
以 具体 的 案例 引出 ,尽量 不 劳 您 费 神思 考 。 本 书 中 还 配 了 大 量 的 截图 ,就 是 希望 读者 即使 不 动 
手 操作 ， 也 能 学 个 八 九 不 离 十 。 

本 书 的 定位 是 Android 开发 入 门 ， 但 是 其 中 也 涉及 很 多 高 级 的 技术 内 容 和 热门 第 三 方 库 ， 
比如 多 线程 、RxJava、 网 络 通信 、Retrofit、 前 后 台 结合 等 ， 所 以 绝 不 仅仅 适合 没有 基础 的 人 。 
本 书 也 适合 那些 未 接触 Android 开发 的 其 他 领域 的 高 手 们 ， 如 果 他 们 要 快速 了 解 Android 开发 
的 方方面面 ， 这 本 书 绝对 是 非常 好 的 选择 。 

本 书 以 App 实例 开发 驱动 , 带领 读者 一 步 步 完 成 一 个 仿 QQApp 的 应 用 , 保证 让 读者 轻松 
搞 伐 每 种 技术 的 用 途 ， 并 体验 到 每 种 技术 的 使 用 模式 。 本 书 紧 跟 Andriod SDK 的 更 新 脚步 ， 
所 有 例子 都 可 在 Android 9 开发 环境 下 编译 和 运行 。 


代码 下 载 


本 书 中 的 示例 都 配 有 源码 ， 地 址 分 别 是 : 


Android 起 步 +RecyclerView: https://gitee.com/nnn/AndFirstStep/repository/archive/master.zip 
QQApp: https://gitee.com/nnn/QQA pp/repository/archive/master.zip 
QQApp 后 台 : https://gitee.com/nnn/QQAppServer/repository/archive/master.zip 
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IT 教学 法 ”， 能 在 降低 教师 工作 量 的 同时 有 效 提 高 学 生 学 习 效 果 。 限 于 作者 的 水 平 ， 书 中 难 
免 存 在 朴 漏 之 处 ， 还 望 各 位 读者 批评 指正 。 


最 后 ， 感 谢 各 位 朋友 的 大 力 帮 助 ， 此 书 的 顺利 面世 离 不 开 各 位 朋友 的 共同 努力 ! 


着 者 
2019 年 2 月 


DII} 


第 1 章 
1.1 
12 
1.3 
1.4 


第 2 章 
2.1 
2.2 


23 
第 3 章 
3.1 
32 


eE. 


3.4 


配置 Android 开发 环境 Ili m 1 
下 载 Android Studio ERN RR ONERE RERO RNORERENER ORE ERROR 1 
£^ Nl lu Std MSN RNC 2 
BOE Anduad BEBE LL s s oru cosseniisetceRe uM eL M P D E LEE 4 
2|-] emm" T— —————————————— H——" 6 

Lead id i, s ERR IIR RR NR RR ENEAN RR E AE EA 8 
DES ,EO 8 
二 12 
22] PATRE IUDA Lore or peo tep dai pru Menit uie EE 13 
221 S dolos | RERO RRERNERRORERERRN 15 
站 18 
2.2.4 x86 虚拟 机 加 速 RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRMMMMMMMMMMMMMMMMKFHKKNMMMMM 19 
225 App 的 样子 21 
工程 里 面 有 4 和 opt ERREUR de M IM 22 

[和 wo NERONE 24 
ROW 24 
ER 2 
PANE 205.7300 NIRNENINCORN ERROR aeie aei 30 
222 = OO 32 
323 El (ioo ————— 35 
(BENE 0-120: m RRRRICEMC————-————-—-———— 36 
排版 姿 方法 之 ConstraintLayout escena 37 
3.3.1 ConstraintLayout 的 原理 38 
3.3.2” 子 控件 在 ConstraintLayout "P fg Zr REA Lii 39 
3.3.3” 子 控件 在 ConstraintLayout 中 横 问 居中 oooaaianienennananoonoenannononnoanonnnnnnnnnnarnnnnnnnnnan 40 
3.34 ” 子 控 件 在 ConstraintLayout P JEPPE eese 41 
133 TENATAN BIE ettet itenim ease ett titt 42 
336 了 于 控件 A STR BERRIN ase intenti tcp treten ieaiuen 43 
Te à weil on D RNC 44 
338 了 于 控件 的 宽 和 和 两 保 持 一 征 比 例 .es 45 


排版 方法 之 RelativeLayout ................. c eee ce ee ccce e enere serene renes ttsne messes terns 48 


Android 9 编程 通俗 演义 


3.5 


3.6 


第 4 章 


4.1 
4.2 


4.3 
4.4 


第 5 章 


5.1 


DM 


第 6 章 


VI 


6.1 
6.2 
6.3 
6.4 
6.5 


6.6 


3.4.1 4E ConstraintLayout 改 为 RelativeLayout nan 49 
3.42 左右 对 齐 与 后 中 arenan nnecena nenene nanenane nna 51 
JAI SETON NER NER 52 
网 和 和 有 有 天 53 
345 dp 是 什么 55 
3.4.6 ”使 用 RelativeLayout 设计 登录 页 面 .ne 56 
,TO E 63 
3.5.1 添加 ScrollView 作为 最 外 层 容 器 63 
3.52 ”改正 在 ScrollView 下 的 排版 66 
S Evi hos - MR TR I RR 70 
各 种 Layout 控件 72 
En 72 
E P vie NERONE TERRE 72 
4.2.1 JA] LinearLayout 中 子 控件 横 癌 居中 站 74 
422 Ean 75 
4.2.3 子 控件 按 比 例 分布 E E A E E AAEE A 76 
4.04 用 LinearLayonut 实现 登录 界面 T] 
EL 79 
TO 80 
OO OO 81 
在 Activity 中 创建 界面 essent treten tnter tns sntsrnsc 81 
» 4 1 s n eu Lu 82 
5.1.2 Activity 的 父 类 nnne 82 
Sia PARP CT RPRRCPRERS 82 
ETE F oH PME MEN EN MINES EUNDUM 83 
本 84 
522 WW View 的 事件 86 
ctcdE c 0l: P —-—————»———————————— HÉ—A —' 87 
S224 AE RB R sede ce AU E 90 
Activity 导航 uses cebadadaniaxió asta ui o meat atu i RIDE SR EA E EH i 93 
IEEE RB emen trien A E A MM ME DEUS: 93 
和 SEE 94 
本 98 
ka) Er 5 | 102 
PRERE SES ENERO NE RR ERROR ER IER RIED 103 
651 Luo dco lop ROREM 105 
Ts 106 
6.5.3 ”将 返回 的 数据 设置 到 控件 中 107 
Action Bar 上 的 返回 图 标 LLL 109 


第 7 章 


第 8 章 


8.1 
8.2 
8.3 


8.4 


第 9 章 


24 
- M. 
d. 
9.4 
23 
9.6 


第 1035 
10.1 


10.2 
10.3 


6.6(1 原生 Action Bar 5 MaterailDesign Action Bar .i. 109 
pex SEHR QUPE NN LL eee tte oie peni tipa com 111 
GAT TEOD E 112 
本 本 TIa 
PE 113 
弄巧成拙 的 Activity AA tnr ttes tns tettrns tss tes trs s tss ss sni 115 
使 用 Fragment. RERO RR ROS 117 
tj Roa AU LL NER 120 
E31 1005 a endo 120 
8.32 KÆ layout 文件 的 内 容 Lies tnter tnter teet ettns testes stes 121 
NE 122 
8.3.4 将 Fragment 放 到 Activity 中 126 
833.5 创建 注册 Fragment tnter terrere 126 
8.3.6 ”显示 RegisterFragment. etes eetnettnneettne sentes sen ts sns 128 
83.7 Jii AppBar Jf] ULTEE SE Lee eee eee ciceacscsmemesesearanemimuac 129 
8.3.8 ”实现 RegisterFragment 的 逻辑 129 
8.39 LoginFragment Piz HHP BARA sess 131 
8.3.10 Fragment 的 生命 周期 entretenir 132 
8.3.11 Fragment 状态 保存 与 恢复 133 
En 134 
对 话 框 E EEA EA 138 
ELI META A [I V uuu E 138 
8.4.2 显示 对 话 框 140 
8.4.3 啊 应 返回 键 S EEE A A E AE A A E 141 
DD nd 142 
菜单 143 
3] cio. —-————!————— "I —€—————Á— Pss" 144 
重 写 onCreateOptionsMenuO0 iae os sra uates inicii dum Su PERO UU Creo lC esp iN MEE 147 
p c 1l —  —————————— 148 
IRI DE octets e M E dUTe 150 
|. 2:9 ——— ————————————— 150 
本 152 
REN. ou UL E 153 
0 153 
ES | NEEE ANN EAE EAE 154 
有 135 
WIL Se 156 
10.3.2 不 要 反问 转 . L37 


VII 


Android 9 编程 通俗 演义 


10.4 


10.5 
10.6 


10.7 


第 113 
11.1 
11.2 


11.3 


第 12 章 
12.1 
12.2 


12.3 


12.4 


VIII 


TE vh o o UL E EE 158 
0 国定 158 
|ui MIENNE NIE RN NIE INI NRI RN EINER ERE 159 
10.4.1 ”旋转 动画 159 
LN 160 
7 164 
Ta 167 
10.6.1 W) Layout 控件 添加 子 控 件 . sees 167 
(BO WE 168 
10.6.3 ”设置 排版 动画 169 
转 场 动 男 MEMRRMKRHARRKNNNNMRNNRNMRRMRMRERRERRE!REE,EHKRHMIMEEEEEEEEENENEMMMMM 171 
10.7.1 使 用 默认 转 场 动画 171 
10.7.2 自 定 义 转 场 动 男 RRRRRRRRRRRRRRRRRRRRRRMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNMNMMMMM 172 
三 176 
创建 一 个 Custom View ..........ssssssssessseetnn tnt ntttnntnntnt tnter tn se s tns sss lesse D 177 
Custom View 类 LL LL sn M E ME E AD M E E 179 
11.2.1 构造 方法 179 
Bi WA 180 
123 E E S onus P E 182 
11.2.4 上 自 定 义 局 性 .5 184 
US 186 
创建 圆 形 图 像 控 件 A sees 188 
11.3.1 将 Drawable £X Bitmap ...................sssssessesseeecnetnetnetn nnne 191 
i e E I l0 ———— ——— — — 192 
Be 193 
Be EN 195 
PEG 200 
站 下 同村 200 
是 二 条 同 于 本 本 201 
12.2.1 添加 新 页 面 201 
12.2.2 创建 Adapter FY sese terere tnrttne tns tttsstts tesa 203 
1223. 设置 RecyclerVieW ue uiia pr ctt iui AD dai n aov mondi n 205 
2 206 
和 207 
12.3.1 创建 条 目的 Layout 资源 208 
IST 210 
12.3.3 明显 区 分 每 一 行 auae nain attesa 212 
12.3.4 ”创建 音乐 信息 类 .i 214 
RON 215 
INIM S o AA EEA AN M LE L E EE 217 


125 
12.6 
12.7 
12.8 


第 1335 
13.1 
13.2 


DAI COE CO 217 
1 219 
OU EC OR 219 
ESTEE ROOST 220 
0 221 
BR DIESE OOO 223 
12.8.1 添加 新 Item 数据 类 224 
1 225 
12.8.3 创建 新 的 ViewHolder 类 226 
12.8.4 区 分 不 同 的 View Type 227 
模仿 QQApp 再 面 OAE E Loa esame reb E E EA HO AE 230 
创建 新 的 Android 项 E tnter tnttntnsttsnees 230 
BRUDER. nM EE M DM UE 230 
1321 SEE di: o o ee 230 
13.2.2 ”设计 登录 界面 232 
HX HP oen MEM E 233 
13.2.4 ”显示 登录 历史 230 
1325， 设 计 历 喝 革 时 项 Km 240 
13.2.6 ”实现 显示 历史 的 代码 241 
1327 selcctor o NCINMERERPRR—————ERR 243 
1 244 
13.2.9 ”和 定制 控件 背景 aanano0000000000000000000000000000000nounonennonnnnonenoenenn oenen onne eneen onneen 245 
1 246 
13.2.11 ”让 菜单 消失 247 
13.2.12” 啊 应 选中 菜单 项 MERE RRORREENISH RR RR 248 
有 250 
1331 6 Le 5 120 TPR—-—-—-—-— vx 254 
Do à Klo] 255 
13.3.3 ”改变 Tab Item 图 标 sese tnntnetnetnettne tns t rtr snnss 258 
13.3.4 为 ViewPager 添加 内 容 . tnter tnetnetntsts 259 
13.3.5 ViewPager 与 TabLayout 联动 ...........ssssseee treten 261 
13.3.6 在 Tab Item 中 显示 图 像 263 
13.3.7. 禁止 ViewPager 滑动 翻 页 tnter 266 
ii 267 
13.3.9 ”显示 气泡 菜单 274 
13.3.10” 抽 屠 效 果 293 
133.11 创建 “联系 人 ”页 NERO RNC RERERRERRREORRECS RENE 308 
13.3.12 创建 “动态 ”页 .ee 328 
133.13 SARPUR oiei e Eao ese eaa aali daai 329 


Android 9 编程 通俗 演义 


第 14 章 
14.1 
14.2 


14.3 
14.4 


第 15 章 
15.1 
15.2 
15.3 
15.4 
15.5 
15.6 
15.7 
15.8 
15.9 


第 16 3$ 
16.1 


16.2 
16.3 


16.4 


实现 聊天 表面 NR RENE NR IRE RNC RR RR REPRE 339 
SERUUM OE 339 
lp, pou e i s ERN RR RR 340 
LII apes du Im. o oir diii d MEME 340 
ia 342 
1423 Soi LIS) layout .es 344 
局 动 ChatActivity 5 346 
E OOO E LE d 347 
NEN Loro MEME MR 349 
ER ODE S o oro nie MPH E 349 
国定 二 在 350 
创建 线程 的 另 一 种 方法 352 
下 二 353 
单线 程 中 异步 执行 356 
同和 357 
ri E iD pisi. 2 cis o: BONNER E ER RN RR NE NE RR 358 
WORD 360 
prins PN I E 361 
alt. 0 MANNI 363 
网 络 基础 知识 303 
RETE IPIE LLL eap opti tema cM Mer M EE 363 
t612 TCP S UDP ———————————————— 364 
IGI HIIPRME VO RO uS I D RN 364 
Android HTTP 古本 365 
本 用 “人 369 
1631 和 证 义 异步 任务 天。 369 
16.3.2 ”使 用 异步 任务 类 370 
16.3.3 ”完善 异步 任务 关 .es 371 
16.3.4 异步 任务 的 退出 378 
BE OT PTT A E cecus iO nete trace ero etu Ed ca pe Duo ictp d equite 380 
16.4.1 使 用 OkHttp 下 载 图 像 eR——A-—A—AA— 381 
16.4.2 创建 Web ll mee REEERRRR-—mmMEHEMMNM 383 
IGAS SMOD NI. mts 385 
16.4.4 JSON 转 对 象 ORIRC RR ARR ERES 387 
16.4.5 使 用 OKHttp 上 传 文件 Leere poa re RD ln depu donc dto itc 388 
使 用 Retrofit HEIT P9238 (5... seen 391 
16.5.1 加 入 Retrofit 的 依赖 项 391 
1652 用 Retrofit 下 载 文 本 392 
16.553 用 Retrofit 下 载 图 像 . 393 
16.5.4 用 Retrofit 上 传 图 像 . ecessessseese entrent nnnc 394 


第 17 章 
17.1 
172 
173 
174 
17.5 
17.6 
17.7 
17.8 


第 1835 
18.1 


18.2 


18.3 


18.4 


于 步 风 用 库 RXJava aleae annnm rni tnnc nre rb cine necne nene 397 
小 斌 牛刀 397 
机 二 400 
精简 接收 代码 401 
ET 402 
an a e 404 
了 405 
RxJava 与 Retrofit 合体 .0 406 
RxJava Retrofit 合体 并 行 执行 etes tnnetett entere stes tr rns tns sna 407 
号 409 
RN 411 
18.1.1 制定 统一 的 数据 返回 结构 411 
18.1.2. [E] ChatService 中 添加 方法 413 
18.1.3 ”登录 请 求 noran onn oenn rrnn nenn. 414 
18.1.4 保存 自己 的 信息 .5 417 
18.1.5 防止 按钮 重复 点 击 .ooooaooooonoonoon0no0000000000000no0nonnoonoenoonnnnoonoanenoenotnrnnronoen neenon en 418 
IIS Sro E na a D aeeai 418 
0 421 
18.2.1 修改 Retrofit 接口 422 
LE 422 
18.2.3 ”获取 并 显示 联系 人 423 
LE 425 
18.2.$ 停止 网 络 连 接 425 
"dil. Foxtic d CREE ORE NA EOE RENTEN BEEN 427 
18.3.1 定义 承载 消 明 的 类 .i 427 
Pb. EDO 3 061 RERUM 428 
18.3.3 在 ChatActivity 中 初始 化 Retrofit .i 429 
Ea E S 0. S PE EE AE ENAA E AAT EEEE 429 
SS SEER S o uL e EAD EL Ee 431 
ER 431 
18.4.1 为 ChatService 增加 方法 431 
18.4.2 发 出 请 求 431 


XI 


- 34 8 


配置 Android 开 发 环境 


Android 开发 有 两 种 IDE〈( 和 集成 开发 环境 ) 可 以 使 用 ， 一 是 Android Studio， 二 是 
ADT+Eclipse。ADT+Eclipse 这 种 方式 在 写 此 文 之 前 Google 已 经 宣布 不 再 更 新 了 ， 所 以 其 实 只 
有 一 种 选择 : Android Studio ! 

使 用 Android Studio 编写 Android App， 和 需要 经 过 以 下 几 步 : 


© 下载 Android Studio. 
@ 安装 Android Studio。 
@ 配置 Android SDK. 


本 文 的 操作 都 是 在 Windows 下 ， 其 余 操作 系统 上 也 差不多 ， 只 要 你 熟悉 那个 系统 ， 参 照 
这 个 教程 也 可 以 配置 成 功 。 


下 载 Android Studio 


我 们 天 朝 上 国 ， 有 长 城 抵御 外 夷 ， 外 夷 指 的 是 Google. FaceBook 等 尚未 “开化 ”的 公司 ， 
长 城 指 的 是 那 道 “ 防 火 墙 ”。 在 此 文 写作 之 时 ， 墙 外 Google 家 的 网 站 依然 上 不 去 ， 但 Google 
正在 将 部 分 业务 安排 回归 中 国 , 所 以 国内 的 Android 官网 镜像 似乎 经 种 能 成 功 访问 ， 所 以 你 首 
先 可 以 试 试 登录 官网 ， 地 址 是 : https;//developer.android.google.cn/studio/ ， 进 入 后 可 看 到 如 图 
1.1.1 所 示 界 面 。 


Android Studio provides the fastest tools for building apps on every type of Android device. 


DOWNLOAD ANDROID STUDIO 


3.2.1 for Windows 64-bit (927 MB) 


C Phone OPTIONS RELEASE NOTES 


图 1.1.1 
如 果 你 是 64 位 的 Windows 操作 系统 , 你 可 以 直接 点 (注意 , 为 了 形象 起 见 , 本 书 使 用 “点 ” 
代表 鼠标 单 击 操作 ) 上 面 的 大 绿 按钮 下 载 安 装 包 ， 如 果 不 是 ， 你 就 需要 点 “DOWNLOAD 
OPTIONS”， 进 入 另 一 个 页 面 选 择 合 适 的 安装 包 。 
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下 载 完 成 后 ， 下 一 步 就 是 安装 Android Studio 了 ， 和 欲 知 后 事 如 何 ， 请 看 下 节 分 解 。 


安装 Android Studio 


找到 下 载 的 文件 ， 这 就 是 安装 文件 ， 双 击 运 行 之 。 启 动 时 间 可 能 比较 长 ， 请 耐心 等 等， 启 
动 后 出 现 图 1.2.1 所 示 的 界面 。 


Choose Components 
Choose which features of Android Studio you want to install. 


| . Check the components you want to install and uncheck the components you don't want to 
| instal. Click Next to continue. 


Select components to install: | . Android Studio | ppm 
[v] Android virtual Device HG 
s ks descripti 


^ Space required: 2.6GE 


图 1.2.1 


什么 都 不 用 改动 ， 直 接点 “Next (下 一 步 ) ”， 进 入 图 1.2.2 所 示 页 面 ， 在 这 里 选择 安装 
人 位置。 注意 安装 到 的 路 径 中 不 要 有 中 文 或 全 角 字 符 。 如 果 你 的 C 盘 剩 余 空间 小 于 20GB. SUN 
该 选择 安装 到 其 他 盘 了 。 如 果 选 其 他 位 置 安装 ， 点 “Browser (浏览 ) ”按钮 ， 默 认 位 置 就 不 
错 ， 我 就 不 改 了 ， 点 “Next”， 如 图 1.2.3 所 示 。 


Configuration Settings 
Install Locations 


Android Studio Installation Location 


The location specified must have at least 500MB of free space. 
Click Browse to customize: 


C: Program Files Wndroid Android Studio ]| Browse.. 


< Back Next > Cancel 


1.2.2 


进入 建立 快捷 方式 的 页 面 ， 这 里 不 需要 动 ， 直 接点 “Next”， 如 图 12 Br. 
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Choose Start Menu Folder 
/X Choose a Start Menu folder for the Android Studio shortcuts. 


Select the Start Menu folder in which you would like to create the program's shortcuts. You 
can also enter a name to create a new folder. 


Android Studio 


7-Zp ^ 
Accessblity 

Accessories 

Administrative Tools 

Android Studio 


Java 

Java Development Kit 
JetBrains 
Maintenance 


[ ] Do not create shortcuts 


< Back Install Cancel 


图 1.2.3 
进入 安装 页 面 ， 等 竺 安装 完成 ， 完 成 后 点 “Next”， 结 果 如 图 1.2.4 所 示 。 


Installing 
/以 Please wait while Android Studio is being installed. 


| Extract: groovy-al-2.4. 12.jar 
(wmm 


Show details 


1.24 
安装 完成 , 如 图 1.2.5 所 示 。 点 “Finish (完成 ) ”。 因为 “Start Android Studio (启动 Android 
Studio) ”被 选中 了 ， 所 以 点 “Finish” 后 ，Android Studio 会 运行 。 


Completing Android Studio Setup 


Android Studio has been installed on your computer. 


Click Finish to dose Setup. 
[7] Start Android Studio 
Android 
otualo 
Firvsh n 
图 1.2.5 
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也 可 以 去 开始 菜单 找到 Android Studio 的 快捷 菜单 启动 它 ， 如 图 1.2.6 所 示 。 
Android Studio 启动 中 ， 如 图 1.2.7 所 示 。 


StUGIO 


© Alarms & Clock 


E Android Studio 


7X Android Studio 


图 1.2.6 图 1.2.7 


局 动 后 可 能 会 出 现 这 样 的 界面 ， 如 图 1.2.8 所 示 。 


^ Android Studio First Run 


(X) Unable to access Android SDK add-on list 


Setup Proxy 


图 1.2.8 


“Unable to access Android SDK add.on list” 的 意思 是 无 法 访问 Android SDK 附件 列表 ， 
这 是 告诉 你 需要 安装 配置 Android SDK。 如 何 搞定 Android SDK We? 下 节 分 解 。 


什么 是 SDK? SDK 是 软件 开发 工具 包 的 意思 ， 你 要 基于 某 个 语言 开发 软件 ， 需 要 使 用 一 
些 类 、 调 用 一 些 方法 ， 这 些 类 和 方法 封装 了 一 些 基 础 功能 和 操作 系统 的 功能 ， 以 这 种 语言 的 方 
式 提 供给 你 ， 这 些 类 、 方 法 等 就 组 成 了 SDK。 

JDK 是 Java SDK 的 意思 ， 就 是 用 Java 开发 程序 时 所 使 用 的 SDK， 要 开发 Android 程序 ， 
当然 得 用 Android SDK. Mj Android Studio 包 中 并 不 带 有 Android SDK， 需 要 单独 安装 ， 当 然 
Android SDK 也 应 该 利用 Android Studio， 人 否则 和 弄 起 来 很 麻烦。 下 面 就 开始 安装 它 ， 步 骤 基 本 
是 这 样 的 : 

在 图 1.2.8 中 ， 点 “Cancel”， 进 入 如 图 1.3.1 所 示 的 页 面 。 
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| 


@ Android Studio Setup Wizard 口 


No Android SDK found, 


Before continuing, you must download the necessary components or select an existing SDK. 
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这 个 页 面 告诉 我 们 Missing SDK (缺少 SDK) ， 你 必须 下 载 必 要 的 组 件 才 行 。 点 Next ， 
进入 如 图 1.3.2 所 示 页 面 。 


^ Android Studio Setup Wizard | 


IX SDK Components Setup 


Check the components you want to update/install. Click Next to continue. 


Mandoia sok ss Me 一 一 一 | The collection of Android platform APIs, tools and 


ndroid SDK Platform utilities that enables you to debug, profile, and 
API 28: Android 9.0 (Pie) - (168 MB) compile your apps. 


The setup wizard will update your current Android 

SDK installation (if necessary) or install a new 

version. 
Android SDK Location: Total download size: 923 MB 
CAUsersVAdministratorVAppData V ocalvAndroidVSdk .,. Disk space available on drive ; 163 GB 


eis [Ne]. cams 


图 1.3.2 


这 个 页 面 让 我 们 选择 SDK 中 的 组 件 ， 其 实 也 选 不 了 ，Check 框 都 是 灰色 的 ， 能 改动 的 就 
是 SDK 的 安装 位 置 (Android SDK Location) 。SDK 文件 占据 的 硬盘 空间 比较 多 ， 所 以 ， 如 
R C 盘 空 间 小 于 30GB， 束 应 该 安装 到 其 他 盘 中 ,注意 选择 位 置 时 ， 路 径 中 不 要 包含 中 文 和 全 
角 字 符 。 我 把 位 置 改 到 了 “F:android-sdk”。 点 Next， 进 入 确认 页 面 ， 如 图 1.3.3 所 示 。 


® a idroid Studio Setup Wizard — d | 


IX Verify Settings 


If you want to review or change any of your installation settings, click Previous. 


Current Settings: 


F^android-sdk 


Total Download Size: 
1.13 GB 


SDK Components to Download: 
Android Emulator 283 MB 


i 
Previous Came | [ Fe] 


1.3.3 
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这 个 页 面 是 让 我 们 确认 一 下 前 面 的 选择 ， 没 什么 问题 就 点 Finish， 进 入 组 件 下 载 页 面 ， 如 
图 1.3.4 所 示 。 


人 /以 Downloading Components 


Downloading... 

https;//dl.google.com/android/repository/android m2repository r47.zip 

Preparing "Install Android Support Repository (revision: 
47.0.0)". 


Downloading https://dl.google 
.com/android/repository/android m2repository r47.zip 


Cancel 


1.34 


下 载 时 间 比 较 长 , 请 保持 网 络 畅 通 并 耐心 等 待 ， 等 不 了 就 出 去 浪 一 下 ， 等 你 回来 可 能 已 下 
载 完 了 ， 如 图 1.3.5 所 示 。 


IX Downloading Components 


Parsing F:Xandroid-sdkMemulatorMpackage.xml 

Parsing F:Xyandroid-sdkWMextrasXyandroidMm2repositoryMpackaqge.xml 
Parsing F:Nandroid-sdkWMextrasNgoogleWmn2repositoryNpackage.xml 
Parsing F:Nandroid-sdkWMpatcherNv4ANMpackage.xml 

Parsing F:Xandroid-sdkMplatform-toolsWMpackage.xml 

Parsing F:Vandroid-sdkMplatformsNandroid-28Mpackage.xml 
Parsing F:*Mandroid-sdkMsourcesNandroid-28Npackage.xml 

Parsing F:Xandroid-sdkMtoolsMpackage.xml 

Android SDK is up to date. 


NM 


1.3.5 


点 Finish， 完 成 收 功 。 
准备 工作 完成 ! 终于 可 以 开始 写 App liv! 


创建 App 工程 时 坚持 遵守 以 下 四 原则 ， 可 以 让 你 少 进 很 多 坑 。 当 然 还 有 更 多 要 遵守 的 ， 
但 是 多 了 记 不 住 ， 先 记 这 四 条 吧 : 


e 工程 名 不 能 有 中 文 或 标点 符号 


好 。 
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比如 : “我 的 工程 ”。 

e 工程 名 中 不 能 有 空格 

比如 “hello world" . 

e 工程 不 要 放 在 有 中 文 的 路 径 下 

比如 helloworld 这 个 工程 的 路 径 这 样 就 不 好 : “ci:\work\ 安 日 \helloworld”。 

e 变量、 函数 、 类 等 不 要 取 中 文 名 或 带 有 标点 符号 

比如 : "Sting 名 字 = "马云 雨 "”。 等 号 前 为 变量 名 ， 不 能 用 中 文 ， 改 为 “name” 比 较 


Android 开发 环境 配置 完成 后 ， 就 可 以 开始 写 App 了 。 别 激动 ， 咱 们 一 步 一 步 来 。 首 先 写 
一 个 最 简单 的 App， 让 它 运 行 起 来 ， 看 看 效果 ， 然 后 我 们 再 解释 一 下 工程 里 面 的 东西 。 


2.1 创建 第 一 个 App 


启动 Android Studio, "nl 2.1.1 所 示 。 


e 


b 


Android Studio 


Version 3.2.1 


3* Start a new Android Studio project 
世 Open an existing Android Studio project 


$ Check out project from Version Control v 


Profile or debug APK 


WW Import project (Gradle, Eclipse ADT, etc.) 
RÉ Import an Android code sample 


X% Configure x Get Help ~ 
2.1.1 


点 “Start a new Android Studio project( 开 始 一 个 新 Android Studio 项 目 )”， 运 行 创建 工程 
的 回 导 。 首 先 映 入 眼帘 的 是 这 样 一 个 窗口 ， 如 图 2.1.2 所 示 。 
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Application name 
HelloWorld 


Company domain 


com.niuedu 


Project location 


C^work^HelloWorld 
Package name 


niuedu.com.helloworld 


C] Include C++ support 
C] Include Kotlin support 


212 


在 这 个 窗口 中 指定 App 的 名 字 ， 公 司 的 域名 和 工程 文件 所 保存 的 位 置 。 

TE “Application name( 应 用 名 称 )” 里 填 入 : HelloWorld。 你 也 可 以 填 其 他 的 名 字 ， 但 是 ， 
第 一 个 程序 ， 还 是 老 老 实 实 跟着 我 学 吧 ，。 

TE “Company Domain (公司 域名 ) ”里 填 入 一 个 域名 ,但 是 要 倒 着 写 ， 现 在 是 做 着 玩 ， 
你 爱 写 什 么 就 写 什 么 吧 ， 跟 我 的 一 样 也 行 。 

TE “Project location( 项 目 位 置 )” 里 填 入 你 想 保存 到 的 位 置 ， 最 好 不 要 直接 写 ， 而 是 点 后 面 
那个 按钮 ， 在 出 现 的 窗口 中 选择 。 

不 要 选中 “Include C++ support” 和 “Include Kotlin support" . 

这 个 页 面 搞 完了 ， 点 “Next (下 一 步 ) ”， 可 以 看 到 如 图 2.1.3 所 示 的 窗口 。 


Select the form factors and minimum SDK 
Some devices require additional SDKs. Low API levels target more 


devices, but offer fewer API features. 
Phone and Tablet 


API 16: Android 4.1 (Jelly Bean) v 


By targeting API 16 and later, your app will 
run on approximately 99.6% of devices. hep me choose 


[ ] Include Android Instant App support 
C] Wear 
API 21; Android 5.0 (Lollipop) 
[]TV 
API 21: Android 5.0 (Lollipop) 
[ ] Android Auto 
[ ] Android Things 


API 24: Android 7.0 (Nougat) 


Previous Cancel 


图 2.1.3 
这 个 页 面 让 我 们 指定 运行 于 什么 样 的 设备 和 哪个 版 本 的 系统 上 。 
@ Phone and Tablet 是 手机 和 平板 。 
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Wear 是 穿戴 设备， 比如 手表 手 环 。 
TV 是 电视 。 

Android Auto 是 汽车 上 的 影音 设备 。 
Glass 是 眼镜 。 


你 可 以 选择 你 的 App 运行 于 一 种 或 几 种 设备 上 。 为 了 快速 学 习 核心 的 知识 ， 我 们 还 是 只 
选择 “Phone and Tablet" 1E. 

选择 完 一 种 设备 后 ， 还 需要 选择 App 最 低能 在 什么 Android 版 本 上 运行 ， 所 选 版 本 越 低 ， 
能 安装 你 的 App 的 设备 越 多 。 

我 们 可 以 看 到 版 本 选择 框 下 面 有 一 段 说 明 ， 你 注意 到 “99.6%” 这 个 数字 没有 ? CRRA 
前 可 以 在 这 么 大 比例 的 手机 上 运行 你 的 App。 你 可 以 选 其 他 的 Android 版 本 , 看 看 它们 当前 有 
多 大 的 使 用 率 。 从 Android8 开始 ， 不 再 文 持 Android4.0 以 前 的 系统 了 。 

选 完 后 ， 点 “Next”， 进 入 下 一 个 页 面 ， 如 图 2.1.4 所 示 。 


Add No Activity 


Basic Activity Empty Activity 


Ey 


Fullscreen Activity Google AdMob Ads Activity Google Maps Activity 


这 个 页 面 让 你 选择 一 个 “Activity”。Activity 翻译 过 来 叫 作 “活动 ”， 这 个 概念 太 抽 像 很 
难 理解 ， 其 实 你 完全 可 以 把 Activity 认为 是 一 个 “页 面 ”， 也 就 是 说 没有 它 ， 你 什么 也 看 不 到 。 
你 可 以 选择 第 一 个 “Add No Activity( 不 添加 Activity)”， 然 后 在 工程 中 手动 创建 一 个 Activity, 
但 是 这 对 初学 者 来 说 难度 太 大 ， 所 以 还 是 让 IDE 帮 有 我 们 弄 一 个 吧 ， 为 了 减少 干扰 ， 看 清 本 质 ， 
我 们 选择 “Empty Activity( 空 Activity)”。 再 点 “Next”， 出 现 如 图 2.1.5 所 示 的 页 面 。 
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Creates a new empty activity 


Activity Name: |. MainActivity 


Generate Layout File 


Layout Name: activity main 


Backwards Compatibility (AppCompat) 


The name of the activity class to create 


| Previous | Next | | Cancel | Finish | 
2.1.5 


在 这 里 指定 Activity 的 类 名 。 在 “Activity Name” HEFIR EKA, ARIE, MH 
Is 
确保 选中 其 下 的 “Generate Layout File〈 产 生 排 版 文件 ) " o Æ “Layout Name” 框 中 输入 
Layout 文件 的 名 字 ， 确 保 选 中 其 下 的 “Backwords Compatibility(AppCompat) (RRR) ” 
稍微 解释 几 个 东西 ， 以 除 尔 心头 之 梗 : 
€ Layout 文 件 : 是 一 个 XML 文件 ， 它 里 面 定义 某 个 Activity 的 全 部 或 部 分 界面 ， 在 运 
行 的 时 候 ，Activity 中 显示 的 各 种 控件 都 是 根据 这 个 文件 中 的 元 素 创 建 的。 
€  Backwords Compatibility: 使 用 高 版 本 的 SDK 写 的 App， 如 何 能 在 低 版 本 的 Android 
系统 中 运行 ， 且 界面 保持 一 致 呢 ? 选中 此 项 即 满足 此 需求 。 
点 “Finish〈 完 成 ) ”， 工 程 会 被 自动 创建 并 打开 (如 果 你 的 电脑 配置 低 ， 可 能 需要 等 待 
一 段 时 间 ) ， 注 意 窗口 的 右 下 角 的 进度 条 ， 如 果 它 存在 ， 就 说 明 工 程 未 创建 完成 ， 需 要 继续 等 
待 ， 如 图 2.1.6 所 示 。 


工程 创建 完成 后 ， 窗 口 如 图 2.1.7 所 示 。 
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€ HelloWorld - [C:\Users\nkm\AndroidStudioPre jects\HelloWorld] - [app] - .--\app\sr-.- [] 
File Edit View Navigate Code Analyze Refactor Build Run Tools VCS Window Help 
| E3 HelleWorld ) P3app ) 户 src o E main) & (Etapp r P * d$ i» [à NL E C: 
x8 Android S e +% I| f} activity mainxml x | € MainActivityjava x | e 
mo ^ O manifests s 
"mU v [rj java package niuedu. com. helloworld; v 
v Éniuedu.com.helloworld 

F © ù MainActivity 3 +import ... 

E y [5iniuedu.com.helloworld (al 5 

Ri © Exampleinstrumenté 6 kÈ public class MainActivity extends AppCompe 

v * [*3niuedu.com.helloworld (te — 
ù ExampleUnitTest e 
Em e - wa 8 G@0verride (3 ) 

s > Páre: - w 
| & » (S Gradle Scripts „~, 9 el protected void onCreate (Bundle savedIn. > 
| 2 N ) 1C super. onCreate(savedInstanceState); 3 

o a 


1] setContentView(R. layout. activi ty_mi 
12 } 

13 } 

E| 0: Messages Terminal $ 6: Android Monitor “TODO A Event Log Gradle Console 


IPON 


| 


Gradle build finished in 25s 554ms (2 minutes ago) CRLF? UTF-8* Context: <no context» "e A | 


El 2.1.7 


现在 Android Studio 打开 了 一 个 工程 ， 看 一 下 开发 工具 Android Studio. £ FAR 1 处 
是 一 个 开关 ， 如 果 你 看 不 到 左右 竖 排 的 边栏 ， 一 定 要 点 它 一 下 。 主 要 工作 区 分 成 左右 两 部 分 ， 
左 区 (标号 2 处 ) 是 工程 结构 ， 右 区 (标号 3 处 ) 是 代码 编辑 区 。 

现在 工程 已 经 创建 成 功 ,， 可 能 你 会 发 现 有 些 错误 提示 或 警告 ,那些 一 般 都 不 是 错误 ,你 只 
需要 编译 一 下 工程 ， 它 们 一 般 就 会 消失 。 编 译 工程 的 方式 是 : 在 主 菜 单 中 点 “Build( 构 建 )”， 
然后 选 “Make Project( 构 建 工 程 )” 即 可 。 

下 一 步 就 要 把 它 运行 起 来 。 请 看 下 回 分 解 。 


当前 这 个 工程 已 经 具备 了 一 个 页 面 ， 而 且 是 可 以 运行 的 。 实 际 上 要 运行 一 个 App 很 简单 ， 
点 荣 单 栏 下 面 工具 栏 上 的 绿色 三 角 箭 头 即 可 ， 如 图 2.2.1 所 示 。 


Build Run Tools VCS Window Help 


A|tzapp-| Pf d$ 5» [) M R 9 C: 
| go er (€ MainActivity.java X 


2.2.1 


点 了 之 后 ， 出 现 如 图 2.2.2 所 示 窗 口 。 
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Select Deployment Target 


No USB devices or running emulators detected Troubleshoot 


Connected Devices 


«none 


| Create New Virtual Device | 


O Use same selection for future launches 


222 

这 个 窗口 让 我 们 选择 一 个 Android 设备 来 运行 我 们 的 Apps App 必须 运行 在 Android 设备 
上 ， 如 果 你 指定 了 一 个 设备 ，Android Studio 就 会 把 我 们 的 App 安装 到 这 台 设 备 上 并 自动 开启 
这 个 App。 但 是 现在 我 的 这 个 窗口 中 显示 “<none>( 没 有 )”， 也 就 是 没有 设备 ， 你 的 也 应 该 一 
样 。 

现在 看 来 运行 一 个 App 还 不 是 那么 简单 。 但 是 不 要 怕 ， 也 不 是 什么 大 问题 ， 我 们 只 要 有 
一 台 Android 设备 就 行 了 。 

设备 分 为 真实 设备 和 虚拟 设备 。 这 两 种 都 可 以 运行 App。 真 实 设 备 就 是 你 的 Android 手机 
或 平板 ， 虚 拟 设备 是 电脑 中 用 软件 模拟 出 来 的 Android 虚拟 机 。 如 果 你 手 上 有 Android 手机 或 
平板 ， 可 以 把 它 连 接 到 电脑 上 ， 让 Android Studio 找到 它 ， 下 面 讲 一 下 如 何 把 真实 的 设备 连接 
到 Android Studio 中 。 


2.2.1 在 真实 设备 上 调试 

要 想 让 Android Studio 找到 真实 的 设备 ， 需 要 做 两 步 〈 这 两 步 不 分 先后 啊 ) : 

e 第 一 步 : 在 设备 上 开局 调试 (DEBUG ) 模式 。 

e 第 二 步 : M USB 线 把 电脑 与 设备 连接 起 来 。 

第 二 步 很 简单 ， 融 不 多 讲 了 ， 但 是 要 注意 ， 把 你 的 设备 连接 到 的 是 运行 Android Studio 的 
电脑 ， 而 不 是 不 相干 的 电脑 〈 好 像 有 点 废话 的 样子 ) 。 

重点 讲 第 一 步 。 不同 版 本 的 Android 系统 ， 其 打开 调试 的 方式 有 点 不 一 样 ， 我 们 讲 一 下 比 
较 新 的 版 本 的 方式 ， 旧 版 本 的 方式 自己 也 可 以 从 网 上 搜索 到 。 其 实 我 也 是 在 网 上 搜 到 的 ， 所 以 
我 先 打 开 某 个 搜索 引擎 〈 微 软 必 应 ) 的 主页 ， 如 图 2.2.1.1 所 示 。 
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cn.bing.com 


2] React Native | A fra a Ere a A JavaScript library 


以 三 星 手机 为 例 ， 我 们 输入 “三 星 手 机 打开 调试 ”， 点 右边 的 搜索 图 标 或 按 回 车 键 〈 当 然 
你 也 可 以 输入 “ 安 晶 手机 打开 调试 ”之 类 的 语句 ) ， 搜 索 结 果 中 的 任何 一 个 几乎 都 对 我 们 有 帮 
助 ， 比 如 我 找 了 一 个 在 三 星 SA 上 开局 调试 的 教程 ， 结 果 在 我 的 三 星 A8 上 也 适用 。 

根据 教程 说 明 ， 打 开 调 试 的 过 程 是 这 样 的 : 打开 设置 〈 也 可 叫 作 “ 设 定 ”) 一 点 “关于 设 
备 ” 一 点 “版 本 号 ”或 “内 部 版 本 号 ”。 当 第 一 次 点 的 话 ， 就 会 提示 你 “点 N 次 开局 调试 ” 
之 类 的 话 ， 跟 着 做 就 行 了 。 如 果 已 经 启用 调试 模式 了 ,会 提示 你 已 经 开局 ， 此 时 就 不 必 再 次 开 
lif. 

当 开 局 开发 模式 之 后 ， 再 回 到 手机 的 设置 主页 面 ， 就 能 看 到 多 了 一 条 “开发 者 选项 ”， 点 
它 进 入 开发 者 选项 页 面 ， 点 最 上 面 的 “ 开 ”， 就 打开 了 调试 模式 。 但 是 可 以 看 到 下 面 还 有 好 多 
设置 项 ， 不 用 理 它们 ， 只 需 在 其 中 找到 “USB 调试 ”这 一 条 ， 开 启 它 即 可 。 

当 你 把 手机 连 到 电脑 上 之 后 ， 再 点 “运行 ”， 是 否 看 到 了 类 似 这 样 的 界面 ?如 图 2.2.1.2 所 


Connected Devices 


Samsung SM-A8000 (Android 5.1.1, API 22) 


| Create New Virtual Device | Don't see your device? 
口 Use same selection for future launches | Cancel | 


图 2.2.1.2 
可 以 看 到 真实 的 设备 被 找到 了 ,选中 它 ， 点 “OK”, 就 可 以 在 这 部 设备 上 运行 App 了 (可 
能 编译 和 安装 App 的 过 程 要 花 一 点 时 间 ， 请 耐心 等 待 ) 。 


d 一 般 原装 的 USB 数据 线 都 可 以 让 电脑 识别 出 设备 ， 但 是 如 果 用 的 是 后 期 买 的 便宜 的 数据 
| 线 ， 充 电 可 能 没 问题 ， 用 来 调试 可 能 就 不 行 了 。 
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2.2.2 配置 虚拟 机 


上 一 节 教 会 了 你 在 真 机 上 开局 调试 , 但 如 果 你 手中 没有 Android 真 机 怎么 办 ? 如 果 你 真 机 
的 系统 版 本 太 低 怎么 办 ?( 还 记得 建立 项 目 时 ， 需 要 我 们 选择 最 低能 安装 到 的 系统 版 本 吗 ?) 再 
或 者 说 ， 我 们 想 在 不 同 Android 版 本 的 系统 中 测试 我 们 的 App 怎么 办 ?不 用 害怕 ， 我 们 有 
Android 虚拟 机 ! 我 们 现在 就 通过 Android Studio 提供 的 工具 来 创建 虚拟 机 。 


CD 点 主 菜单 中 的 “Tools( 工 具 )”， 如 图 2.2.2.1 所 示 。 


World] - Android Studio 2.2.3 


or Build Run [ee 局 VCS Window Help 


Tasks & Contexts 


Generate JavaDoc... 


New Scratch File... Ctrl - Alt« Shift-Insert 
IDE Scripting Console 

*- Firebase 

'$ Android 


TII 


(2) 在 出 现 的 菜单 中 点 “Android”， 然 后 在 出 现 的 子 菜单 中 点 “AVD Manager" , nd 
2.2.2.2 所 示 。 


Android $8 Sync Project with Gradle Files 

'* Android Device Monitor 
AVD Manager 

Æ SDK Manager 

v Enable ADB Integration 

Q Layout Inspector 

@ Theme Editor 

Q Firebase App Indexing Test 


2295 


(30 现在 会 出 现 如 图 2.2.2.3 所 示 窗 口 ， 点 按钮 “Create Virtual Device (创建 虚拟 设备 ) ” 
即 开 始 创建 。 


Your Virtual Devices 


人 Android Studio 


[5] $ C 


Virtual devices allow you to test your application 


without having to own the physical devices. 


| 十 Create Virtual Device... | 


To prioritize which devices to test your application 
on, visit the Android Dashboards, where you can get 
up-to-date information on which devices are active 
in the Android and Google Play ecosystem. 


2993 
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其 实 也 可 以 在 点 “运行 ”后 ， 在 设备 选择 对 话 框 中 点 “Create New Virtual Device (创建 
新 虚拟 设备 ) ”， 如 图 2.2.2.4 所 示 。 


Ka L $ 
£ l 
Ea 


No USB devices or running emulators detected Troubleshoot 


Connected Devices 
<none> 


| Create New Virtual Device me 


[ ] Use same selection for future launches 


ES [ore 


2224 


不 论 哪 种 方式 ， 都 会 出 现 如 图 2.2.2.5 所 示 窗 口 。 


Size | Resolution 
450x800 


1440x2560 
1440x2560 


1080x1920 


768x1280 xhdpi 


Halavy Navne ARG“ 了 72nw12Rn wvhrini 


| New Hardware Profile | Import Hardware Profiles | | j | Clone Device.. | 


222.5 


(4) 这 个 窗口 让 我 们 选择 一 个 种 设备 去 创建 虚拟 机 。 

最 左边 区 域 是 类 别 ，TV 表示 电视 设备 ，Wear 表示 穿戴 设备 ，Phone 表示 手机 ，Tablet 表 
示 平 板 。 中间 区 是 具体 设备 属性 , Name 表示 设备 的 名 字 , Size 表示 设备 的 屏幕 尺寸 , Resolution 
表示 设备 的 分 辩 率 ，Density 表示 设备 像素 的 密度 。 最 右边 区 域 是 预览 信息 。 

你 可 以 选 一 个 设备 ， 然 后 点 “Next” 按 钮 ， 出 现 如 图 2.2.2.6 所 示 窗 口 。 


Select a system image 


- Recommended | x86 Images | Other Images 
Release Name | API Level * Target 

Nougat Download 25 x86 64 Android 7.1.7 (with Google. 

Nougat Download 25 x86 Android 7.1.1 (with Google | 

Nougat ji Android 7.0 (with Google Al 

Nougat Download 24 x86 Android 7.0 (with Google Al 


Marshmallow j Android 6.0 (with Google AI 


Lollipop Download Po x86 Android 5.1 (with Google Al 


Lollipop Download 2 BD 64 Android 5.1 (with Google Al 
— = ec These images are recommended because they 
run the fastest and include support for Google 
APIs 


Questions on API level? 


Previous Cancel 


2.22.6 


16 


第 2 章 第 一 个 APP 


C5) 这 个 窗口 让 我 们 选择 一 个 System Image. (系统 镜像 )。 

系统 镜像 就 是 一 种 模拟 操作 系统 安装 光盘 的 文件 ， 就 像 我 们 Ghost Windows 时 用 到 的 
“iso” XIF. 

左边 区 域 的 上 面 有 三 个 Tab 页 ， 让 我 们 选择 不 同 的 镜像 。 第 一 个 Recommended 是 推荐 的 
镜像 ， 第 二 个 是 x86 Images 是 x86 镜像 ， 第 三 个 是 其 他 类 型 的 镜像 。 注 意 ， 如 果 你 不 连 网 的 
话 ， 表 格 中 是 不 会 出 现 镜像 信息 的 。 

表格 中 一 行 是 一 个 镜像 文件 。 第 一 列 是 镜像 所 对 应 的 Android 系统 的 名 字 (Android 每 个 
大 版 本 都 用 一 种 甜品 的 名 字 作 代号 ) 。 第 二 列 是 所 支持 的 SDK 的 版 本 , 第 三 列 是 所 兼容 的 CPU 
架构 , 第 四 列 是 操作 系统 的 版 本 号 以 及 所 包含 的 附加 功能 。 黑色 的 行 表 示 是 已 下 载 到 本 地 的 镜 
像 文件 ， 而 灰色 的 行 是 未 下 载 到 本 地 的 镜像 文件 。 可 以 看 到 在 灰色 的 行 上 的 “名 字 ” 列 中 ， 名 
字 的 旁边 是 “Download (下 载 ) ”， 点 它 就 可 以 下 载 这 个 镜像 文件 。 不 需要 全 部 下 载 ， 只 需 
下 载 你 所 需 的 镜像 文件 即 可 。 

可 以 看 到 推荐 的 都 是 兼容 X86 架构 的 镜像 ， 你 点 Tab 页 的 “Other Images( 其 他 镜像 )”， 
就 可 以 看 到 非 X86 的 镜像 ， 比 如 “armeabi”“am64” 和 等， 这些 都 是 以 “armm ”开头 ， 表 示 兼 
容 ARM 架构 的 CPU。 其实 我 们 的 真实 设备 一 般 都 是 ARM 架构 的 CPU, 但 是 虚拟 机 却 推荐 我 
们 使 用 X86 架构 的 镜像 ， 这 是 为 什么 呢 ? 因为 我 们 的 用 于 开发 的 电脑 都 是 X86 架构 的 ， 运 行 
在 上 面 的 虚拟 机 如 果 也 是 X86 架构 ， 那 么 其 运行 就 能 优化 。 你 完全 可 以 创建 ARM 架构 的 虚 
拟 机 ， 但 是 那 启动 速度 比 乌龟 还 慢 。 也 许 你 看 此 书 时 ，ARM 架构 的 虚拟 机 也 被 优化 到 很 快 了 
也 很 难说 呢 。 

好 ， 现 在 你 选择 一 个 已 下 载 到 本 地 的 镜像 ， 然 后 点 “Next”， 出 现 如 图 2.2.2.7 所 示 的 界 
面 。 


Verify Configuration 
AVD Name Nexus 5 API 23 


Nexus 5 4.95 1080x1920 420dpi Change... 
[2] p | | The name of this AVD. 


1. Marshmallow Android 6.0 x86 | Change... | 


Startup orientation E = 


Portrait Landscape 


Emulated 


Performance E | — t 


Device Frame Enable Device Frame 


Show Advanced Settings | 


Previous | | Nex | | canca | EMI 
Ed 2.2.2.7 
C6) 这 里 我 们 可 以 对 虚拟 机 做 进一步 的 设置 。 
我 看 还 是 不 用 了 吧 ， 默 认 就 很 好 ， 最 多 也 就 改 改 名 字 (AVD name) 。 注 意 右 边区 域 中 如 
果 有 以 下 提示 的 话 ， 你 需要 安装 叫 作 “HAXM” 的 工具 ， 如 图 2.22.8 所 示 。 
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AVD Name 


The name of this AVD. 


Recommendation 
HAXM is not installed. 
Install Haxm 


—— 


图 2.2.2.8 
要 安装 Haxm 很 简单 ,点 一 下 超 链接 就 自动 下 载 安 装 。 这 个 工具 是 帮 有 我 们 提升 x86 虚拟 机 
的 运行 速度 的 。 
(7) 点 “Finish( 完 成)”， 虚 拟 机 开始 被 创建 ， 这 可 能 需要 一 段 时 间 ， 请 耐心 等 待 。 
完成 后 ， 出 现 如 图 2.2.2.9 所 示 的 窗口 。 


Your Virtual Devices 


人 Android Studio 


Type Name Resolution | API Target — CPU/ABI Size on Disk| 
[3] Nexus5. 1080-1. 23 Android. x86 2GB 


十 Create Virtual Device... 


2.2.2.9 
这 里 面 列 出 了 我 们 创建 的 所 有 虚拟 机 。 最 右边 的 三 个 图 标 是 用 于 管理 虚拟 机 的 ,比如 局 动 、 
修改 、 删 除 等 。 绿 三 角 箭头 表示 局 动 。 你 可 以 现在 就 点 它 一 下 试 试 ， 是 不 是 看 到 有 虚拟 机 局 动 
了 ?恭喜 你 ， 你 家 多 了 一 台 Android 设备 ! 
也 可 以 不 在 这 里 局 动 虚拟 机 ， 在 运行 App 时 再 局 动 ， 一 样 的 。 


2.2.3 JAZ) App 


当 虚 拟 机 或 真实 设备 配置 完成 后 ， 我 们 就 可 以 启动 App 了 。 点 工具 栏 上 的 运行 图 标 ， 可 
以 看 到 如 图 2.2.3.1 所 示 的 窗口 。 
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@ AndrirstStep - [CAUsersinkmWworkNandroid-coursesyAndFirstStep] - [app] - ..NappNsrey = [1 
File Edit View Navigate Code Analyze Refactor Build Run Tools VCS Window Help 
OHUD LDAA e» «ia [k^ 555m RR s 


T. Id activity main.xml X | @ MainActivity java " e 
E * app (^ Select Deployment Target $ 
ET © ma ve 
7| v Mja No USB devices or running emulators detected Troubleshoot 
"A 1 
3 Connected Devices CompatActivity 
F » Ej ""one* 列 出 己 连接 的 真实 设备 或 己 启 动 的 虚拟 机 
u » [3 Available Virtual Devices 
ra 
v v lares AppCompatActi 
[1 
E > - 列 出 未 启动 的 虚拟 机 
e - 时 e savedInstanc 
* "c Gradle | nceState); T 
E Create New Virtual Device | ctivity main); S 
z a 
: | z 
[C] Use same selection for future launches "e" Cancel e 
|  WiCMessages  [BiTermina! — 4 6: Android Monitor -* TODO C]EventLog E] Gradle Console 
E Run selected configuration 15:1 CRLF* UTF-8$ Context «nocontet ù 县 6 
2231 


这 个 窗口 让 我 们 选择 一 个 设备 来 运行 我 们 的 App。 靠近 顶部 的 提示 是 告诉 我 们 “没有 检测 
到 正在 运行 的 USB 设备 或 模拟 器 ”， 因 为 没有 用 USB 线 连接 上 手机 或 平板 ， 也 没有 提前 启动 
虚拟 机 ， 所 以 会 有 此 提示 。 再 往 下 的 “Connected Devices” 区 列 出 所 有 已 连接 Causas m 
备 ， 这 里 是 “None”， 如 果 你 提前 启动 了 虚拟 机 或 连接 了 真实 设备 ， 那 么 这 里 就 能 列 出 它们 。 
在 下 面 的 “Available Virtual Devices” 区 列 出 的 是 已 创建 但 未 启动 的 虚拟 机 ， 我 们 可 以 在 这 里 
选择 一 个 虚拟 机 ， 点 “OK ”， 融 会 局 动 虚拟 机 ， 并 且 在 虚拟 机 准备 好 之 后 ，Android Studio 
会 自动 编译 App， 然 后 把 编译 出 的 APK 文件 (App 安装 包 ) 安装 到 设备 中 ， 再 启动 App。 

好 了 ,行动 起 来 , 选中 虚拟 机 ， 点 “OK” 吧 , 你 看 到 了 什么 结果 ?可 能 需要 的 时 间 比 较 长 ， 
请 耐心 等 待 ， 如 果 过 到 问题 ， 也 请 继续 看 下 节 。 


2.2.4 x86 虚拟 机 加 速 


Android Studio 之 所 以 推荐 创建 x86 架构 的 虚拟 机 , 主要 是 因为 它 快 , 但 是 这 是 有 条 件 的 ， 
条 件 有 三 : 


e 你 的 电脑 必须 是 Intel 的 CPU. 
e 你 的 电脑 必须 在 BIOS 中 开启 了 CPU 虚拟 支持 。 
e 你 必须 安装 了 虚拟 加 速 工具 :HAXM。 


所 以 ， 如 果 你 的 电脑 是 AMD 的 CPU, JEU IEEE. EAR AMD 也 是 x86 架构 ， 但 是 
Android 虚拟 机 却 不 支持 它 的 虚拟 化 技术 ,只 文 持 Intel 的 虚拟 化 技术 。 拥 有 AMD CPU 电脑 的 
你 只 能 创建 和 运行 ARM 架构 的 虚拟 机 , 也 很 好 , 能 帮助 你 锻炼 耐心 (似乎 Google 正在 对 AMD 
CPU 进行 虚拟 机 提速 优化 ， 可 能 你 读 此 书 时 ，AMD CPU 也 不 存在 问题 了 ) 。 

如 果 你 的 电脑 是 Intel 的 CPU， 那 么 还 需要 开启 虚拟 化 支持 和 安装 加 速 工具 。 请 看 下 节 。 
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2.24.4 BIOS 中 开局 虚拟 化 支持 


需要 做 两 件 事 : 一 ， 进 BIOS; 二 ， 找 到 虚拟 化 设置 项 并 开启 它 。 

台式 机 进入 BIOS 的 方式 比较 固定 ， 开 机 后 马上 按 住 “Del” 键 ， 过 几 秒 就 能 进入 。 如 果 
进 不 了 ,你 就 得 上 网 搜 你 的 电脑 型 号 如 何 进入 了 。 如 果 是 笔记 本 电脑 , 不同 的 品牌 差别 就 比较 
大 了 ， 一 般 都 需要 在 网 上 搜 一 下 。 比 如 搜 : “联想 笔记 本 怎么 进 BIOS”， 然 后 我 找到 这 篇 文 
章 : http://jingyan.baidu.com/article/546ae18577d3f11149f28c23.html， 写 得 很 详细 。 

虚拟 化 支持 在 不 同 品牌 的 电脑 中 叫 法 有 点 不 一 样 ， 一 般 都 带 有 “Virtualization ”这 样 的 字 
眼 ， 如 图 2.2.4.1.1 所 示 。 


323411 


英语 不 好 的 同学 ， 目 己 翻 译 一 下 吧 ，BIOS 里 全 是 英文 啊 。 

2242 安装 HAXM 

可 能 在 前 面 的 讲解 中 你 已 经 安装 了 HAXM 这 个 工具 ， 但 是 你 也 应 该 看 一 下 这 一 节 ， 这 里 
讲 了 安装 Android 开发 工具 的 通用 方法 。 这 个 工具 在 Android Studio 中 就 可 以 安装 。 

启动 Android SDK 管理 器 : 在 主 菜 单 中 点 “Tools” 一 “Android” 一 “SDK Manager" , 
如 图 2.2.4.2.1 所 示 。 


ITUENCTTITUETUITTIENS 
Build Run BS VCS Window Help 
DD = Tasks & Contexts > 
Generate JavaDoc... 
New Scratch File... Ctrl+Alt+Shift+Insert 
IDE Scripting Console 
l Firebase 
8 Sync Project with Gradle Files 
'É Android Device Monitor 


L AVD Manager 
X. SDK Manager 
v Enable ADB Integration 


Q Layout Inspector 
(9 Theme Editor 
C* Firebase App Indexing Test 
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Android SDK 管理 窗口 会 显示 出 来 ， 如 图 2.2.4.2.2 所 示 。 
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Appearance & Behavior 
Appearance 
Menus and Toolbars 
System Settings 
Passwords 
HTTP Proxy 
Updates 
Usage Statistics 
Android SDK 
Notifications 
Quick Lists 
Path Variables 
Keymap 
Editor 
Plugins 


Build, Execution, Deployment 


第 2 章 第 一 个 APP 


) Appearance & Behavior » System Settings » Android SDK 


Manager for the Android SDK and Tools used by Android Studio 
Android SDK Location: | C:AUsersi\billc\AppData\LocaħAndroid\Sdk 


SDK Tools SDK Update Sites | 
the available SDK developer tools. Once installed, Android Studio will 
automatically check for updates. Check *show package details* to display available 
versions of an SDK Tool. 


| Name Version | Status 
L GPU Debugging tools 3.1.0 Not install 


Google Play APK Expansion library 


1 Installed 
Google Play Billing Library 5 Installed 
Google Play Licensing Library 1 Installed 
Google Play services 38 Installed 
Google USB Driver, rev 11 11.0.0 Installed 
LJ Google Web Driver 2 Not install 


Intel x86 Emulator Accelerator (HAXM installer) 5.0.5 Installed 
NDK 


> * Support Reposito 


Launch Standalone SDK Manager 


图 2.2.4.2.2 


选择 “SDK Tools" Tab 页 ， 在 下 面 的 列表 区 拖 动 深 动 条 ， 直 到 看 到 “Intel x86 Emulator 
Accelerator (HAXM Installer) ”， 如 果 前 面 的 Check 框 已 被 选中 ， 就 表示 已 安装 了 ， 不 需要 
再 安装 。 如 果 没 有 选中 ， 就 选中 它 ， 然 后 点 下 面 的 按钮 “Apply CYH) ”或 “OK”，SDK 


"EEUU Lu ES POE SCR. 


22.5 App 的 样子 


不 论 你 在 启动 App 时 选择 了 虚拟 机 还 是 真实 设备 ， 现 在 都 应 该 能 看 到 App 长 什么 样 了 ， 


我 的 是 图 2.2.5.1 这 样 的 。 


AndFirstStep 


图 2.2.5.1 
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e 最 上 面 深蓝 色 长 条 是 系统 状态 栏 ， 上 面 显示 了 很 多 系统 状态 ， 比 如 是 否 有 内 存 卡 、 是 
否 连接 到 了 WIFI、 电 池 电 量 等 。 
e 下面 的 高 度 大 一 些 的 蓝 色 条 为 导航 栏 ， 一 般 显 示 一 个 页 面 的 标题 、 菜 单 等 。 
e 白色 区 域 是 内 容 区 ， 现 在 只 显示 了 一 段 文字 : “Hello World" , 
至 此 ， 第 一 个 App 终于 运行 起 来 了 ， 应 该 说 最 难 的 鼓 捣 出 来 了 。 休 息 休息 吧 。 
回忆 一 下 我 们 做 了 什么 ? 安装 Android Studio 和 Android SDK， 创 建 工程 ， 配 置 虚拟 机 ， 
运行 App， 也 没 多 少 东 西 嘛 。 


工程 里 面 有 什么 


环境 准备 好 了 ， 下 面 要 开始 写 代 码 了 。 先 了 解 一 下 Android 工程 里 有 什么 吧 ， 如 图 2.3.1 
Bran 


注意 左边 箭头 所 指 的 Tab 页 要 选中 ， 右 边 第 头 所 指 的 地 方 有 很 多 选项 ， 它 们 表示 从 不 同 
的 角度 来 观察 工程 。 默 认 选 “Android”， 因 为 我 们 是 Android 工程 。 


DHO we» XOA aAA G d *«Ilrxkapr 


| - Android 
i * Capp 
TY D manifests 
kà AndroidManifest.xml 
* Ō java 
> © niuedu.com.helloworld 
> © niuedu.com.helloworid (androidTest) 
> © niuedu.com.helloworld (test) 
* Pares 
© drawable 
> © layout 
» © mipmap 
» © values 
* (5 Gradle Scripts 
(€ build.gradle (Project: HelloWorld) 
e build.gradle (Module: app) 
[di gradle-wrapper.properties (Gradle Version) 
目 proguard-rules.pro (ProGuard Rules for app 
[di gradle.properties (Project Properties 
(8 settings.gradle (Project Settings) 
[di local.properties (SDK Location 


图 2.3.1 


工程 用 一 个 树 型 结构 来 展示 ， 它 的 根 有 两 个 : “app” 和 “Gradle Script”。 这 是 两 个 组 ， 
不 一 定 对 应 实际 的 文件 夹 。 其 实 你 应 该 抛 开 文件 夹 的 概念 来 观察 这 个 工程 结构 。 
app 组 下 有 三 个 组 ， 其 作用 是 : 


€ manifests: 里 面包 含 Manifest 文件 (AndroidManifest.xml)， 这 个 文件 可 以 认为 是 整个 
App 的 全 局 描述 和 配置 文件 。 
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€ java: 里 面 是 Java 类 们 。 类 分 布 在 三 个 Java 包 中 ， 最 上 面 的 包 里 放 的 是 最 终 包 含 在 
App 中 的 代码 ,有 “androidTest” 标 记 的 包 里 要 放 与 Android 有 关 的 测试 代码 , 有 “test” 
标记 的 组 里 要 放 与 android 无 关 的 测试 代码 。 

€ res: 这 下 面 放 的 是 非 代 码 文件 ， 这 些 文件 不 能 被 编译 器 编译 ， 它 们 叫 作 资源 。 包 括 
图 片 、 界 面 定义 等 。 不 同类 型 的 资源 放 在 不 同 的 组 下 。 

Android Studio 使 用 Gradle 这 个 工具 来 管理 工程 ， 所 以 我 们 看 到 了 “Gradle Scripts(Gradle 


脚本 )” 组 下 有 很 多 与 Gradle 有 关 的 文件 。Gradle 文件 一 般 不 需要 直接 修改 ， 在 项 目 设置 中 改 
变 选项 就 会 修改 它们 。 


d 一 个 工程 在 打开 过 程 中 ， 一 开始 可 能 显示 的 工程 结构 不 是 这 样 的 ， 此 时 你 应 该 注意 观察 
l Android Studio 最 下 面 的 状态 栏 上 是 否 有 进度 条 在 动 ， 如 图 2.3.2 所 示 。 


E] proguard-rules.pro (ProGuard Rules for app) 
[di gradle.properties (Project Properties) 

© settings.gradle (Project Settings) 

[à local.properties (SDK Location) 


| 58e TODO Æ 6: Android Monitor — [S Terminal — X 0: Messages 
Executin... (moments ago) 3 Gradle Build Running Œ Z *ss553535)4Q n/a Co 


图 2.32 
如 果 有 ， 就 表示 在 执行 Grade 脚本 ， 工 程 的 初始 化 还 未 完成 ， 你 看 到 的 样子 还 不 是 最 终 
的 样子 ， 此 时 最 好 不 要 动工 程 中 的 文件 。 


下 面 开 始 喜 揭 这 个 工程 ， 让 App 变 得 有 个 性 和 强大 起 来 。 界 面 是 最 容易 摘出 效果 的 部 分 ， 
我 们 就 从 界面 入 手 吧 ! 
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Android 最 简单 的 工程 已 创建 ， 并 且 也 运行 了 ， 下 面 我 们 就 要 丰富 这 个 工程 的 界面 ， 增 加 
它 的 功能 。 让 我 们 一 步 一 步 来 ， 先 玩 一 玩 界 面 CUI) . 

UI 是 User Interface 的 缩写 ， 其 意思 是 用 户 界 面 。 我 们 看 到 的 窗口 ， 控 件 都 属于 UI， 相 对 
于 命令 行 的 用 户 界 面 ， 这 种 界面 是 图 形 用 户 界面 ， 简 写 为 GUL, [(H3ef]9oX HRS F, W 
i] UI. 

如 今 的 GUI 框架 都 讲究 代码 与 UI 设计 分 离 ，Android 也 是 这 样 ， 它 把 UI 的 样子 定义 在 
XML 文件 中 ，App 运行 时 根据 XML 的 内 容 在 内 存 中 创建 各 种 界面 元 素 对象 。Android 里 这 种 
定义 UI 的 XML 文件 被 称 作 Layout 资源 (有 时 被 简称 作 layout) 。 

现在 我 们 的 App 中 ， 其 界面 中 央 显 示 了 一 句 话 “Hellow Word” (WB 2.2.5.1) ， 它 是 
一 个 TextView 控件 显示 ， 太 样 太 森 破 ， 让 我 们 改进 这 个 App IE. 

a UI 设计 与 代码 不 分 开 ， 也 就 是 直接 用 代码 设计 UI， 我 们 可 以 先 预 想 一 下 怎么 做 。 比 
如 我 想 在 页 面 中 显示 一 个 图 像 ， 写 代码 的 话 ， 肯 定 有 一 些 类 和 方法 (API)〉 可 以 供 我 们 调用 以 
操作 界面 。 根 据 我 的 经 验 , 我 们 应 该 能 通过 API 获取 到 代表 内 容 显示 区 的 一 个 UI 对象 (容器 )， 
然后 创建 出 一 个 能 显示 图 片 的 UI 对 象 ， 把 图 像 UI 对 象 添 加 到 容器 UI 对 象 中 ， 图 像 成 了 容器 
的 儿子 ， 儿 子 会 显示 在 爸 将 上面， 所 以 就 能 在 内 容 区 看 到 这 个 图 像 了 。 这 个 想法 对 吗 ? 很 对 ! 
其 实 不 同 操作 系统 中 的 UI 构建 都 是 这 么 个 原理 。 然 而 ， 在 Android 开发 中 ， 还 有 更 简单 的 办 
法 ,不 用 与 一 句 代 码 ， 融 能 完成 UI 构建 。 如 何 做 呢 ? 编辑 UI 资源 文件 ! 如 何 编辑 UI 资源 呢 ? 
使 用 界面 构建 器 ! 


Layout 


Layout 的 意思 是 界面 布局 ， 靠 它 来 设计 界面 的 布局 ， 所 以 layout 类 型 的 资源 文件 就 是 界 
面 定义 文件 。 使 用 Android Studio 提供 的 界面 构建 器 设计 Layout， 可 以 做 到 所 见 即 所 得 。 

Android 中 的 UI 定 义 文件 是 一 个 XML 文件 ， 由 于 它 不 是 Java 代码 ， 所 以 它 被 归 为 资源 。 
Layout 资源 放 在 哪里 呢 ?” 如 图 3.1.1 所 示 。. 


第 3 章 UI 资源 与 Layout 


* Caapp 
» Dmanifests 


> © java 
v lares 
[33 drawable 


y H layout q 


kà activity main.xml 
» © mipmap 
v © values 
kà colors.xml 
» © dimens.xml (2) 
kà strings.xml 
kà styles.xml 


图 3.1.1 


可 以 看 到 res/layout 组 下 当前 只 有 一 个 文件 : activity main.xml， 就 是 它 定 义 了 我 们 所 能 
到 的 界面 。 它 是 我 们 创建 这 个 App 时 被 自动 添加 的 ， 我 们 也 可 以 手动 添加 它 。 双 击 打 开 它 ， 
可 以 看 到 如 图 3.1.2 所 示 界 面 〈 注 意 第 一 次 显示 UI 的 过 程 可 能 比较 长 ， 请 耐心 等 待 ) 。 


珊 activity_ main.xml - € MainActivity.java 


Q £t- "[g-] 9- [] Nexus4 * = 277 » (559 © (9 


ON- Ë I” 


m" ImageView 
三 RecyclerView 


> «fragment» 
ag HellowWertd 


Component Tree 


v ^L ConstraintLayout 
Ab TextView - "Hello W 


$ 
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这 里 展示 的 是 界面 设计 器 。 在 这 个 窗口 中 可 以 通过 拖 动 一 些 控件 摆 放 它们 的 位 置 来 设计 
App 的 页 面 。 标 号 所 示 区 域 作用 如 下 : 


1: 控件 类 别 。 

e 2: 选中 类 别 的 控件 列表 。 

e 3: 所 设计 的 页 面 中 的 控件 树 。 

e 4: 切换 页 面 设 计 器 视图 ， 可 选择 设计 视图 或 源码 视图 ，Desgin 是 设计 ， 就 是 当前 看 
到 的 ，Text 是 源码 ， 就 是 此 页 面 所 对 应 的 XML 的 内 容 。 
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面 预览 图 。 注 意 可 能 与 App 实际 运行 效果 有 些许 差异 。 

面 排版 预览 图 。 突 出 显示 各 控件 之 间 的 摆 放 位 置 和 它们 之 间 的 位 置 关系 。 

此 图 标 有 下 拉 菜 单 ， 用 于 选择 如 何 预 览 界面 ， 有 三 种 模式 ， 即 同时 显示 预览 图 与 
排版 图 、 只 显示 排版 图 、 只 显示 预览 图 。 


可 以 看 到 标号 5 处 是 一 个 手机 页 面 的 预览 图 。 这 个 layout 文件 定义 了 一 个 页 面 的 界面 , 一 
个 页 面 叫 作 Activity。 但 是 ， 在 预览 时 你 也 有 可 能 不 辛 看 到 的 是 图 3.1.3 这 样 的 界面 。 


& activity main.xml x 
Palette a|% 1- B AEE ©- QNeusa- 257 (BAappTheme 做 Language” O- 
P: Widgets Q18* O EJ 4 à 
(At| Text View 
əki Button 
= ToggleButton 
[^| CheckBox 


@ RadioButton * Rendering Problems 
84 CheckedTextView O java util. concurrent Timecu jon: Preview timed out while renderin; 
2s s This typically happens when thcrc is an itc loop or unbounded rccursior 
— Spinner - ; 
= custom views. 
= ProgressBar (Large) z 


at java.util zip. ZipFile.rcad(ZipFilc java:-2) 
一 DrenroccBar at java.util zip.ZipFile.access$ 1400(ZipFile java:60) 

Component Tree at java util zip.ZipFile$ZipFieInputStrcam read(ZipFile java 717) 

at java.util zip.ZipFile$ZipFiieInflaterInputStream. fill( ZipFile.java:-419) 
; atjava.util zip.InflatcrInputStrcam rcad(InflaterInputStrcam. java: 158) 
Nothing to show at com intettij.openapi util io. FileUGIRt 10adB ytes(FileUt!Rt.java:627) 

at com.intelij.openapi util io.FileUtil loadBytes(F ileUtil java:1 604) 
at com.intelij.util lang MemoryResource.ioad( MemoryResource.java:74) 
at com.intel'j.util lang JarLoader getResource(TarLoader java: 134) 


e 5: 页 
e 6: 页 
e 7: 


saniado4g «T 


a| | Design| Text 
erminal = 0: Message i og — =] Gradle Console 


3.1.3 


预览 不 成 功 。Rendering Problems 的 意思 是 “呈现 时 的 问题 ”, 就 是 呈现 UI S 6 o 
要 解决 这 个 问题 ， 一 般 重 新 编译 这 个 工程 即 可 ， 如 图 3.1.4 所 示 。 


Refactor Ni Run Tools VCS Window Help 


ir Make Project 14i? 
Make Module 'app 


PERS Clean Project s4- BMÁ25- (AppTheme | 
Rebuild Project 

O Widget! Refresh Linked C++ Projects s 

Ab] Text" 


ok Butte 


&& activity 


Edit Build Types... 
Edit Flavors... 
Edit Libraries and Dependencies... 


Chec — select Build Variant.. _ 
@ Radi nflater.createViewFromTag(I 


RA Ch Build APK nflater createViewFromTag(l 

e€ Generate Signed APK... nflater rInflate Original(Layo 
= Spin Analyze APK... nflater Delegate rInflate(Layq 
一 Frog Deploy Module to App Engine.. nflater.rInflate(LayoutInflaten 
=a DronraccBar at android. view. Layoutinflater inflate(LayoutInflater. 


= lTogc 


> 
LI 1144121 batid 


图 3.1.4 


当 Make 完 之 后 ， 就 能 看 到 UI 的 样子 。 
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改动 Layout 


让 我 们 改 一 下 这 个 Layout， 显 示 一 个 图 片 吧 。 首 先 看 一 下 | psiewe Q 3 I- 
Android Studio 的 界面 设计 项 中 为 我 们 提供 了 哪些 可 用 的 控件 ， 如 | common Ab Textview 
图 3.2.1 所 示 。 TEE 
控件 的 类 别 有 : | E E usi 
€ Common: 一 些 最 和 常用 的 控件 。 | mm Aj TN 
e Text 文本 显示 控件 和 各 种 文本 输入 控件 ， 它 们 都 不 能 容 ^5. Multiline Text 
Ah. e 
€ Buttons: 各 种 按钮 。 iu uA 
€  Wedgets: 包含 各 种 不 好 分 类 的 控件 ， 它 们 的 共同 特点 是 m321 
不 能 容纳 孩子 。 
€ Layouts: 专门 用 于 排版 的 控件 们 ， 它 们 是 容器 ， 专 用 于 容纳 孩子 们 ， 按 某 种 规则 排 
列 它 的 孩子 们 。 


€ Containers: 容器 ， 与 Layout， 专 门 于 用 容纳 孩子 们 ， 支 持 内 容 滚 动 ， 孩 子 们 的 排列 
方式 固定 ， 不 能 更 改 。 


€ Google: Google 为 Android 提供 的 第 三 方 控件 ， 比 如 Google 的 广告 控件 ，Google 地 
图 控件 。 

€ Legacy: 旧 控 件 们 ， 有 了 新 的 替代 控件 。 

€ Project: 我 们 在 项 目 中 自 定 义 的 控件 们 。 

要 显示 图 像 ， 应 该 去 Common 或 Widgets 组 中 去 找 控 件 。 如 图 3.2.2 所 示 。 


é activity main.xml 
Palette Q 4-1 $- GY D[Neus4- 
Ab TextView Oo» N  J Ë 
88 Button 
P ImageView 
:三 RecyclerView 
<> «fragment» HelloWorld 
I) ScrollView 


Containers 
Google 
Legacy 


Component Tree w- l- 
Hello World! 


v ^, ConstraintLayout 
Ab TextView - “Hello World 
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选择 “ImageView【〈 图 像 视图 ) ”这 个 控件 ， 然 后 把 它 拖 到 了 预览 页 面 的 内 容 区 。 当 你 放 
开 鼠 标 时 ，Android Studio 就 会 打开 一 个 窗口 ， 让 你 选择 要 在 这 个 图 像 控 件 中 显示 的 图 像 (第 
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一 次 运行 可 能 要 等 很 长 很 长 时 间 ) ， 如 图 3.2.3 所 示 。 


| @ EN > Bis 


Drawable |" Project «pem—— 
Color pn ic_launcher 


pe ic_launcher_round 


Add new resource * | 


| 
" android q 


No Preview 
im alert dark frame 
T alert light frame 
& ^ arrow down float 


Ani arrow up float 


OK | | Cancel 


图 3.2.3 
最 左边 为 类 别 ， 8 " Drawable" M “Color” , 分 别 表 示 图 像 和 颜色 。 你 要 选择 “Drawable”， 
右边 显示 的 都 是 可 用 的 图 像 资源 (就 是 图 片 文 件 ) 。 这 些 Drawable 资源 又 被 分 为 “Project” 
和 “Android” 两 组 ，Project 表示 我 们 工程 中 市 的 资源 ，android 表示 Andriod SDK 中 带 的 资源 。 


随 你 便 ， 选 什么 都 行 ， 比 如 我 选 Project 中 的 第 一 个 : ic launcher， 点 OK 后 就 可 以 看 到 预览 界 
面 中 多 了 一 个 图 像 ， 如 图 3.2.4 Br. 


P ERU 
AndFirstStep 


Kl 3.2.4 


图 像 有 点 小 ,你 可 能 想 把 这 个 图 像 调 大 一 点 ,怎么 做 呢 ? 图 像 控件 默认 是 以 显示 的 图 像 的 
真实 大 小 来 决定 目 身 的 大 小 ， 也 就 是 控件 适应 图 像 ， 但 也 可 以 及 过 来 ， 让 图 像 适 应 控件 ， 此 时 
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我 们 应 该 为 图 像 控 件 指 定 固定 的 大 小 , 然后 让 图 像 根 据 图 像 控 件 目 动 缩放 。 要 做 到 此 效果 ， 只 
需要 修改 图 像 控 件 的 “layout_width”【〔 宽 度 ) 41 "layout height" CAR) 属性 。 要 想 修改 控 
件 属 性 ， 需 打开 属性 栏 ， 如 图 3.2.5 Bra. 
bp] - ...\appPNsrc\mainNresNlayoutNactivity main.xrnl ... 
; VCS Window Help 
5k d$w[, unu gcc: Ak ? 


I" 用 Hl ©- [| Nexus 4- 325» 人 AppTheme 
e i4 x4 siB.lm. i.3 (9 [rJ Àj 


0 109 200 500 400 


ld ERU 
AndFirstStep 


laPom pio1puv dis 


Q Event Log Gradle Console 


n/a n/a Context: «no context» à 
图 3.2.5 
ARKAN EB EER, RETIRES, wB 3.2.6 所 示 。 


imageView2 


layout width wrap content 


layout height wrap content 


ImageView 
srcCompat ipmap/ic launcher | ~ 


contentDescri... 
background 


scaleType 


图 3.2.6 
红 框 内 就 是 属性 栏 , 你 可 能 看 到 的 内 容 跟 我 的 不 一 样 , 是 因为 你 当前 选中 的 控件 跟 我 的 不 
一 样 ， 当 你 在 预览 窗口 或 控件 树 中 选中 图 像 控 件 ， 束 看 到 跟 我 一 样 的 内 容 了 。 
可 以 看 到 当前 layout width 和 layout height 的 值 都 是 “wrap_content( 包 着 内 容 ) ”， 所 
以 控件 的 大 小 由 其 内 容 (就 是 图 像 ) 决定 。 现 在 让 我 们 把 这 两 个 值 改 为 固定 的 大 小 ， 比 如 宽 和 
高 都 改 为 “200dp”， 效 果 如 图 3.2.7 所 示 。 
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H Jl S- [] Nexus4- 3É25- 
t siBelgz-:-3 8 
CC 200 300 


layout width — |200dp 


layout height | 200dp 


srcCompat ipmap/ic launcher | ~ 


contentDescri... 


background 


scaleType 


adjustViewBou... [-) 


32.7 


看 到 了 吧 ? 图 像 被 我 们 摘 大 了 ! 
有 人 可 能 注意 到 了 表示 距离 的 数字 后 要 带 “dp”， 是 的 ， 必 须 带 它 ， 它 是 一 个 距离 单位 ， 
表示 的 是 实际 的 物理 距离 ， 与 像素 大 小 无 关 。 


das 属性 栏 中 显示 的 属性 是 随 着 你 选择 的 控件 而 变化 的 ， 你 可 以 点 “Hello World! ”这 个 文本 
控件 斌 试 ， 是 不 是 显示 的 属性 变 了 ? 所 以 你 在 编辑 属性 之 前 要 先 确定 点 的 是 哪个 控件 ， 因 
为 经 常 发 生 点 错 的 情况 。 


要 知 后 事 如 何 ， 下 节 分 解 。 


3.2.1 添加 图 像 资源 


如 果 我 们 想 在 图 像 中 显示 自己 喜欢 的 图 像 ， 怎 么 办 呢 ? 这 也 不 难 , 我 们 可 以 把 电脑 上 的 图 
像 复 制 到 工程 的 资源 中 ， 这 样 束 可 以 在 工程 中 使 用 它们 了 。 

做 法 是 这 样 : 在 你 的 文件 浏览 器 中 找 一 个 图 像 文 件 (如 果 没 有 就 从 网 上 下 载 一 个 ) ， 最 好 
是 png 格式 的 ，jpg 的 也 行 ， 然 后 在 文件 浏览 器 中 复制 此 文件 (不 要 说 你 不 知道 怎么 复制 ， 按 
Ctrl+C 或 在 右键 快捷 沫 单 中 选 “复制 ”) ， 然 后 在 你 的 工程 中 ， 在 要 放 入 的 组 上 点 右键 ， 在 
右键 菜单 中 选 “Paste (粘贴 ) ” 即 可 ， 如 图 3.2.1.1 所 示 。 
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'8 Android Q x #- l- (HelloWorld x (app X = activity main 
v japp Palette 
» M manifests All 


"3 1; Project 


Ab TextView 

M C3 java Widgets OK Button 
» [£niuedu.com.helloworld Text F| ToggleButton 
» É3niuedu.com.helloworld (androidTest) Layouts CheckBox 
> Eniuedu.com,helloworld (test) Containers ®© RadioButton 


Y lares r ^» CheckedTextView 


drawable — usi 
3 layout New t SrogressBar 
B activity me LNK C++ Project with Gradle "rogressBar (Horizontal) 


»eekBar 
> © mipmap 36 Cut o 


^ © values Copy Ctrl+C 
v (© Gradle Scripts Copy Path Ctrl+Shift+C 

(€ build.gradle (Proje Copy as Plain Text 

(€ build.gradle (Mod Copy Reference Ctrl+Alt+Shift+C 


[si gradle-wrapper.p! 
(3) proguard-rulespr Find Usages Alt«F7 
là gradle.properties Find in Path... Ctrl Shift F 


他 settings.gradle (P! — Replace in Path... Ctrl «Shift«R 
[à local.properties (S Analyze » out 
Refactor »| “Hello Worlc 


*1 T: Structure 


g 
Z 
" 
E 
e 


32.1.1 


图 像 必 须 放 到 “drawable” 组 中 。drawable 组 中 专门 放 可 以 绘制 的 资源 ， 所 以 你 不 要 放 到 
其 他 组 中 。 点 了 粘贴 (Paste) 之 后 出 现 如 图 3.2.1.2 所 示 的 对 话 框 。 


Copy file C erue aii 
New name， Zt png — —— 
To directory: CAUsersinkmMAndroidStudioProjectsyHelloWorldXa \sre\main\res\drawable B 


Use Ctrl +44 for path completion 
uix | Cancel Help 


3.2.12 


这 个 对 话 框 给 你 一 个 修改 文件 名 和 文件 存放 位 置 的 机 会 , 存放 位 置 没 问 题 , 不 要 动 。 资源 
名 字 你 可 以 随便 取 , 但 要 有 意义 ， 而且 也 不 能 用 中 文 ， 不 能 以 数字 开头 ， 字母 不 能 大 写 ， 如 果 
不 符合 这 些 要 求 ， 工程 编译 通 不 过 。 如 果 你 英语 不 好 就 用 拼音 取 名 。 如 果 你 的 资源 文件 名 不 符 
和 要 求 ， 当 你 编译 App 时 ， 就 会 看 到 错误 ， 如 图 3.2.1.3 Bram. 


v Pares Component Tree 8 
v © drawable qm 
- -activity main (Rela 
Eb TextView - “Hell 


activity mai." xml 


Design | Text 
ssages Gradle Build 


lel 


Gradle tasks [-app:generateDebugSources, :app:generateDebugAndroidTestSources, 
(9 :app:mockableAndroidJar, :app:xprepareDebuqUnitTestDependencies, :app:complleDebugSources, 
*app:compileDebugAndroidTestSources, :app:compileDebugUnitTestSources] 


Execution failed for task ''app:mergeDebugResources'. 
€ > CNUsershbillevAndroidStudioProjectsWHelloWorldvappsrev main resvdrawableV20.png: Error; The resource 
name must start with a letter | 
Q BUILD FAILED 
M Total time: 27 Råå sers - 
TODO Æ & Android Monitor E Terminal | i| 0: Message: Event Log [E] Gradle Console 


Sa O E a 中 


3.2.13 


在 “Messages” 这 个 窗口 中 ， 输 出 了 编译 中 遇 到 的 错误 ， 可 以 看 到 这 个 错误 最 后 给 出 的 原 
因 : “The resource name must start with a letter”， 意 思 是 资源 的 名 字 必 须 以 字母 开头 。 
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文件 或 文件 夹 改 名 


如 果 这 个 资源 已 加 入 了 工程 ,但 是 名 字 不 合格 ， 怎 么 办 呢 ? 还 是 可 以 改名 的 ! 改名 方式 是 
这 样 的 : 在 文件 上 点 出 右键 菜单 ， 选 “Refactor ( 重 构 ) ”， 再 选 “Rename CE", W 
图 3.2.1.4 所 示 。 


P Edit View Navigate Code Analyze Refactor Build Run Tools 
| HelloWorld > ^2 app > © src > O main > E3 res > © layout > 9 acti hange Signature. Ctrl+F6 
iW Android M | ©  $-!- (9HelloWorld Type Migration... Ctrl - Shift-- F6 


v L3app Palette Make Static 
> ® manifests All Convert To Instance Method... 


v D java Widgets Move... 
> [$3 niuedu.com.helloworld Text Copy... 


» [f3niuedu.com.helloworld (androidTest) Layouts Safe Delete 
Containers m 
Images Extract 
v lares Date 
v [53 drawable Transitions 
lel female.pn i E 


> [£3niuedu.com.helloworld (test) 


Inline 
Invert Boolean.. 
New Pull Members Up.. 
qeu Link C++ Project with Gradle Push Members Down 
mipmap M, Cut Ctrl -X Use Interface Where Possible. 
É N values 加 Copy Ctrl «C Replace Inheritance with Delegation... 
v (€ Gradle Scripts Copy Path Ctrl «Shift«C Remove Middleman 
e build.gradle (Pro. Copy as Plain Text Wrap Method Return Value... 
(€ build.gradle (Mo Copy Reference Ctrl - Alt« Shift «C Encapsulate Fields... 
[di gradle-wrapper.r ği Paste Ctrl+V Replace Constructor with Factory Method... 
E] proguard-rules.p > Jump to Source FA Generify 
[4 gradle.properties Zi] Jump to External Editor — Ctrl« Alt« FA Migrate... 
(© settings.gradle (f Find Usages Alt+F7 Convert to Java 
[à local.properties( Analyze ' |. Remove Unused Resources... 
Add RTL Support Where Possible... 
Add to Favorites » 


Reformat Code Ctrl - Alt--L 


3.2.14 


一 个 窗口 现 身 ， 如 图 3.2.1.5 所 示 。 


Rename file female.png and its usages to: 
female" 


Search in comments and strings 


| Refactor | | Preview || Cancel | | Help 


3.2.1.5 


注意 改名 时 不 要 改 扩展 名 ， 改 完 后 点 “Refactor〈 重 构 ) ” 即 可 。 
既然 已 添加 了 自己 的 图 像 资 源 ， 那 束 把 它 显示 出 来 吧 ? 预知 后 事 如 何 ， 下 节 分 解 。 


3.2.2 显示 自己 的 图 像 
选中 图 像 控 件 ， 打 开 属 性 栏 ， 如 图 3.2.2.1 所 示 。 
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AndFirstStep 


layout width 200dp 


layout height 200dp 
ImageView 
srcCompat mipmap/ic launcher ~- 


contentDescripti... 


background 
scaleType 
adjustViewBoun.. |- 
cropToPadding |- 
Favorite Attributes 


focusablelnTouc... |- 


visibility none 


View all properties? 


s221 
在 列 出 的 属性 中 没有 改变 图 像 的 项 , 不 是 没有 ， 是 隐藏 了 。 默 认 下 ， 属性 栏 中 只 显示 少量 
常用 的 属性 , 要 想 看 到 全 部 属性 ,需要 点 箭头 所 指 的 链接 “View all properties( 查 看 所 有 属性 )”， 
你 会 发 现 显示 出 了 一 大 挫 属 性 ， 如 图 3.2.2.2 所 示 。 


exus 4~ M25 ~ Properties q cS | ^l 
M2 jim T id image View? 
7S- iv layout width 2004p 
ZU layout height 200dp 
Constraints 
Layout Margin In 7 zr) 
Padding 22277 
Theme 
elevation 
layout editor absolut 
layout editor absolut 


AndFirstStep 


srcCompat &mipmsp/ic isuncher 
accessibilityLiveRegio 
accessibilityTraversal/ 
accessibilityTraversalt 
adjustViewBounds — [- | 

alpha 

background 
backgroundTint 
backgroundTintModt 
baseline 
baselineAlignBottom [一 
clickable |- 
constraintSet 
contentDescription 
contextClickable [~ 
cropToPadding |= 
drawingCacheQuality 
duplicateParentState | 一 


fadeScrollbars [=] 


3227 


拖 动 滚动 条 ， 就 可 以 看 到 所 有 属性 。 那 么 ， 哪 个 是 改变 所 显 图 像 的 属性 呢 ? 这 个 属性 叫 
“srcCompat”， 上 图 中 可 以 看 到 ， 它 的 值 是 “@mipmapyic launcher”。 这 个 以 “@ ”开头 的 
字符 串 表 示 的 是 一 个 ID,， 每 个 资源 都 有 目 己 的 ID, ID 的 名 字 就 是 这 个 资源 的 文件 名 。 这 里 通 
过 这 个 ID 引用 了 一 个 图 像 资 源 。 我 们 要 改变 显示 的 图 像 ， 可 以 为 这 个 属性 直接 写 入 某 个 图 片 
的 人 D， 但 是 手写 拱 烦 易 出 错 ， 我 们 还 是 借助 工具 来 设置 吧 ， 点 图 3.2.2.3 所 示 的 按钮 。 
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layout editor absolut 


layout editor absolut 


srcCompat ^ 


accessibilityLiveRegio 


accessibilityTraversal/ 


弹出 了 资源 选择 对 话 框 ， 如 图 3.2.2.4 所 示 。 
XR “Project” X PHY female 图 像 〈 我 们 刚 加 入 的 ) ， 点 OK。 现 在 图 像 控件 变 成 了 这 
样 ， 如 图 3.22.5 所 示 。 


And — 0341 


Add new resource w 


Drawable ™ Project Name: female | Default BA 
E ih ic launcher 
String 

pe ic_launcher_round | 


Style 
Tandroid 


c 
alert dark frame (à drawable/female 


O female.png 
a alert light frame 


入 4^ arrow down float 


Y *& arrow up float 


图 3.2.2.4 3.2.2.5 
终于 看 到 了 头像 ! 
你 一 定 要 注意 !Android Studio 会 很 目 作 聪明 地 把 属性 编辑 器 中 你 刚刚 编辑 过 的 属性 移 到 
靠 顶 的 位 置 ， 就 是 说 这 些 属性 在 属性 栏 中 乱 跑 ! 这 到 底 是 在 帮忙 还 是 捣乱 ?反正 搞 得 我 很 不 适 


Ws. 


z 


运行 起 来 看 看 真实 的 效果 是 什么 样 的 吧 ? 运行 App 的 方法 ， 请 参考 22 8. 
此 时 ，activity main.xml 这 个 文件 的 内 容 是 这 样 的 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«android.support.constraint.ConstraintLayout 

xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 


android:layout width-"match parent" 

android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 
«TextView 


android:layout width-"wrap content" 
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android:layout height-"wrap content" 
android:text-"Hello World!" 


app:layout constraintBottom toBottomOf-"parent" 

app:layout constraintLeft toLeftOf-"parent" 

app:layout constraintRight toRightOf-"parent" 

app:layout constraintTop toTopOf-"parent" /» 
«ImageView 


android:id-"Q-*id/imageView2" 
android:layout width-"200dp" 
android:layout height-"200dp" 
app:srcCompat-"(Qdrawable/female" 
tools:layout editor absoluteX-"l6dp" 
tools:layout editor absoluteY-"ló6dp" /> 
«/android.support.constraint.ConstraintLayout» 


这 些 源码 是 怎么 看 到 的 呢 ? 看 下 面 图 3.22.7 就 明白 了 : 


Component Tree 
* hj ConstraintLayout 
网 imageview2 
OK button “Button 


|| Design Text" 
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3.2.3 XML 小 解 


界面 设计 文件 的 格式 是 XML。 虽然 我 作 此 书 时 假设 你 已 知道 什么 是 XML, 但 是 终究 会 有 
初学 者 读 此 书 ， 我 还 是 把 XML 稍微 解释 一 下 。 

XML 是 存储 数据 的 一 种 格式 ， 它 只 能 以 文本 方式 存 数 据 ， 也 就 是 说 它 存 不 了 图 片 ( 也 有 
办 法 存 ， 但 很 麻烦 ， 也 不 推荐 这 样 做 ， 所 以 你 现在 可 以 认为 它 只 能 存 文本 ) 。 它 的 数据 由 元 素 
组 成 ， 一 条 数据 是 一 个 元 素 ， 元 素 由 标记 来 表示 ， 标 记 即 以 “< >” 包 起 来 的 文本 。 比 如 : 
<aaa></aaa> 就 是 一 个 元 素 ，<aaa> 是 元 素 的 开始 标记 ，</aaa> 是 它 的 结束 标记 。 如 果 一 个 元 素 
不 包含 子 元 素 ， 就 为 空 元 素 。 比 如 这 里 <aaa> 就 是 一 个 空 元 素 。 空 元 素 可 以 把 结束 标记 省 略 ， 
写作 : <aaa /> 。 以 下 则 表示 <aaa> 有 儿子 <bbb> 和 <ddd>， 还 有 孙子 <ccc>: 

«aaa» 


«bbb» 
«ccc f» 


«/bbb» 
«ddd /» 
«/aaa» 


一 个 元 素 除 了 可 以 有 多 个 儿子 ， 还 可 以 有 多 个 属性 ， 如 : «aaa eee="1" /> , eee 就 是 <aaa> 
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的 一 个 属性 , 等 号 前 是 属性 的 名 字 , 等 写 后 是 属性 的 值 。 注意 属性 的 值 必须 用 单 引 号 或 双 引 号 


das 引号 必须 是 半角 字符 ! 这 是 一 个 新 手 常 掉 进 去 的 坑 。 


3.24 Layout 源码 解释 
现在 让 我 们 逐条 解释 activity main.xml 文件 中 一 些 令 人 迷惑 的 代码 。 


XML 都 这 样 开 头 ， 不 要 太 在 意 。version 表示 版 本 是 1.0, encoding 表示 编码 是 utf8， 要 想 
没 乱码 ， 你 必须 保证 这 个 XML 文件 真 的 是 utf8 编码 。 
«android.support.constraint.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 


android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


这 是 界面 的 最 外 层 的 元 素 ， 可 以 看 到 标记 名 是 一 个 类 CConstraintLayout) 的 全 名 。 如 果 这 
个 类 是 Android SDK 的 核心 库 中 的 类 ， 可 以 把 包 省 略 ， 只 写 类 名 。 根 据 类 名 我 们 就 知道 界面 
的 最 外 面 是 一 个 ConstraintLayonut 控件 。 

此 元 素 中 有 一 些 “xmlns” 开 头 的 属性 ， 它 为 xml 命名 空间 指定 了 别名 ， 比 如 “android” 
“app” 和 “tools” 就 是 三 个 别名 ， 要 使 用 那个 命名 空间 中 定义 的 符号 ， 必 须 在 名 字 前 带 上 命 
名 空间 的 别名 ， 比 如 : android:layout width="match parent"， 这 个 属性 名 layout width 就 属于 
android 这 个 别名 所 对 应 的 命名 空间 中 定义 的 人 符 号， 如果 命 名 空间 没有 引入 ， 就 不 能 使 用 。 此 
时 Android Studio 会 提示 语法 错误 。 比 如 ， 当 我 把 xmlns:android="http://schemas.android.com/ 
apk/res/android" 这 一 条 删 掉 之 后 ， 出 现 了 如 图 3.2.4.1 所 示 的 样子 。 


<Qxml version-"1.0" encoding= utf-8 ?> 
ConstraintLayout 
xmlns:appz"http://schemas.android.com/apk/res-auto" 


xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 


android:layout height-"match parent" 


tools:context-"niuedu.com.andfirststep.MainActivity"» 


«ImageView 
android:id-"9j*id/imageView2" 
android:layout width-"edp" 


图 3.2.4.1 
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看 到 了 吧 ? 所 有 的 “android” 变 成 了 红色 (对照 IDE 看 ) 。 
宽 和 高 这 两 个 属性 必须 存在 ， 即 : 


android:layout width-"match parent" 


android:layout height-"match parent" 


它们 是 控件 的 宽 和 高 ， 这 两 个 属性 必须 存在 ! “match_parent” 的 意思 是 匹配 父 控件 ， 就 
是 与 父 控件 的 大 小 一 样 。ConstraitLayout 是 最 外 面 的 控件 ， 它 的 大 小 必须 与 Activity 一 样 ， 也 
就 充满 整个 屏幕 ， 所 以 值 必须 为 “match parent" (我 们 前 面 讲 过 了 ， 宽 和 高 的 值 可 以 有 三 种 : 
match parent, wrap content 和 固定 值 ) 。 

以 “tools” 为 前 组 的 属性 ， 仅 在 界面 设计 器 中 起 作用 。 这 些 属性 都 是 用 于 设计 界面 时 指示 
界面 设计 器 的 行为 的 ， 在 App 运行 时 它们 是 不 起 作用 的 。 比 如 
tools:context="niuedu.com.andfirststep.MainActivity"， 这 是 告诉 界面 设计 器 此 Layout 中 定义 的 
界面 与 MainActivity 这 个 类 关连 ， 其 实 真正 的 关联 是 由 Java 代码 决定 的 ， 可 以 与 这 里 不 一 致 
而 不 影响 运行 。 


android:id="@+id/imageView2" 


这 个 属性 是 为 控件 设置 ID。JID 是 一 个 控件 的 唯一 标志 ， 此 处 的 ID 叫 作 “imageView2”。 
在 一 个 Layout 文件 中 的 ID 不 能 重复 。“imageView2” 是 ID WJF, ID 在 App 运行 时 其 实 
是 一 个 整数 。 如 果 一 个 控件 要 与 男 一 个 控件 发 生 关 系 ， 那 么 就 是 通过 ID 来 引用 另 一 个 控件 。 
不 仅 控 件 要 有 D, MARERA ID， 比 如 我 们 这 个 layout 文件 activity_main.xml， 它 的 人 D 
的 名 字 就 是 文件 名 activity main. 


排版 次 方法 之 ConstraintLayout 


在 我 作 此 书 时 ，ConstraintLayout 还 是 非常 新 的 东西 。 但 是 这 个 东西 的 确 好 用 ， 是 Android 
极力 推荐 的 一 个 排版 控件 。 

所 有 叫 “Layout” 的 控件 都 是 用 于 排版 的 ， 就 是 它 能 决定 它 所 包含 的 子 控件 的 位 置 。 这 些 
Layout 控件 有 个 特点 : 可 以 包含 多 个 子 控件 。 不 同 的 Layout 控件 ， 它 们 排列 子 控件 的 方式 不 
一 样 。ConstraintLayout 是 既 好 用 又 强大 的 一 个 ， 能 够 应 付 复 杂 的 要 求 ， 而 且 运 行 效率 很 高 ， 


一 些 由 多 个 简单 Layout 组 合 实现 的 界面 ， 应 该 改 由 一 个 ConstraintLayout 来 实现 ， 当 然 它 也 不 
是 万 能 的 。 


我 们 现在 的 界面 就 是 采用 了 ConstraintLayout， 如 图 3.3.1 所 示 。 
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CheckBox . - 


*V 8 7:00 
AndFirstStep 


Component Tree 
h.] ConstraintLayout 
Ab TextView - "Hello World" 
网 imageView2 
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实际 上 你 创建 一 个 新 的 Activity 时 ， 它 的 layout 文件 默认 就 使 用 ConstraintLayout 排版 。 


3.3.1 ConstraintLayout 的 原理 


Constraint 是 “约束 ”的 意思 ,我 们 可 以 为 ConstraintLayout 的 子 控 件 添加 什么 约束 呢 ?” 位 
置 上 的 约束 。 你 的 App 要 面 对 的 设备 ， 屏 幕 有 大 有 小 、 有 方 有 圆 、 有 宽 有 息 ， 要 想 设 计 一 套 
界面 来 适应 不 同 的 屏幕 就 非常 难 。 比 如 你 不 可 能 用 固定 距离 的 方式 来 保持 一 个 控件 在 横 回 上 拓 
中 。 有 了 ConstraintLayout 就 可 以 克服 这 种 困难 , 你 可 以 为 一 个 控件 添加 一 个 “保持 横 癌 大 中 ” 
的 约束 ， 于 是 它 就 横 回 大 中 了 ， 不 论 在 任何 屏幕 上 。 

可 以 设置 什么 样 的 约束 呢 ? 跟 你 想 要 的 差不多 ， 比 如 你 可 以 这 样 设置 控件 之 间 的 位 置 关系 : 


e 设置 子 控件 左边 或 右边 与 ConstraintLayout 的 左边 或 右边 对 齐 ， 这 样 就 可 以 保持 子 控 
件 居 左 或 居 右 。 

e 设置 子 控件 下 边 或 上 边 与 ConstraintLayout 的 上 边 或 下 边 对 齐 ， 以 此 保持 子 控件 居 上 

SJÉT. 

设置 子 控件 在 ConstraintLayout 中 横向 居中 还 是 纵向 居中 ， 或 者 是 横向 纵向 都 居中 。 

设置 子 控件 在 ConstraintLayout 中 居中 偏 左 或 偏 右 或 偏 上 或 偏 下 。 

设置 同属 于 一 个 ConstraintLayout 的 子 控件 A 在 子 控件 B 的 上 面 或 下 面 或 左边 或 右边 。 

设置 同属 于 一 个 ConstraintLayout 的 子 控件 A 与 子 控 件 B 左边 对 齐 或 右边 对 齐 或 上 边 

对 齐 或 下 边 对 齐 。 

你 还 可 以 设置 子 控件 本 身 的 约束 ， 比 如 : 


e 帘 和 高 保持 nm 的 比率 。 
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e 宽 或 高 为 某 个 固定 的 值 。 
e 宽 或 高 由 内 容 决 定 , 比如 文本 控件 的 大 小 由 文本 中 文字 的 个 数 决 定 , 图 像 控 件 的 大 小 
由 图 像 的 实际 大 小 决定 。 


下 和 面 ， 让 我 们 把 约束 的 各 种 知识 都 体验 一 下 。 


3.3.2 ” 子 控 件 在 ConstraintLayout 中 居 左 或 居 右 


当前 的 页 面 中 ，TextView 控件 已 经 居中 了 。 我 们 把 它 删 掉 ， 用 ImageView 来 做 一 下 。 删 
除 一 个 控件 很 简单 ， 选 中 它 ， 点 鼠标 右键 ， 在 出 现 的 菜单 中 点 “Delete”， 也 可 以 选中 它 直接 
按 “Delete” 键 。 但 是 ， 有 时 可 能 因为 种 种 原因 ， 不 好 选中 它 ， 那 么 你 可 以 在 控件 树 中 选中 它 ， 
如 图 3.3.2.1 所 示 。 

删 拯 它 之 后 ， 只 剩 下 图 像 了 。 现 在 选中 图 像 ， 这 时 未 给 图 像 控件 加 任何 约束 ， 于 是 它 默认 
就 在 左上 角 。 我 们 可 以 为 图 像 添加 靠 左 的 限制 , 但 这 样 其 实 没 效 果 ， 那 么 我 们 就 为 它 添加 靠 右 
的 限制 吧 ， 如 图 3.3.2.2 所 示 。 


AndFirstStep 


Component Tree w- J- 


h4 ConstraintLayout 


Ab TextView - "Hello World!” 


m M : 


3.32.1 3.322 
当 鼠 标 进 入 控件 范围 内 ， 就 会 出 现 一 个 边框 ， 这 个 边框 的 四 个 边 的 中 间 都 有 一 个 小 圈 圈 ， 
当 女 标 进 入 这 个 圈 圈 时 ， 它 会 变 大 变 绿 ， 此 时 你 就 可 以 从 这 个 小 圈 圈 中 拖 出 一 条 线 。 这 条 线 就 
代表 了 约束 。 我 要 靠 右 ， 所 以 我 把 这 条 线 往 Layout 控件 的 右边 界 拖 ， 当 拖 到 右边 界 时 ， 图 像 
的 边框 竟然 动 了 ! 虽然 很 诡异 ， 但 是 你 不 要 惊 惰 ， 只 需 松 手 即 可 ， 出 现 如 图 3.3.2.3 所 示 效 果 。 
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$25* WAppTheme Properties 


8-|-I--2 à Eb ^ 


100 


PA 7:00 
AndFirstStep 


Lj 
| layout width | 200dp 


layout height | 200dp 
ImageView 
srcCompat ( drawable/female 


contentDescription 


background 


scaleType 
adjustViewBounds 


cropToPadding 
Favorite Attributes 


focusablelnTouchMode |- 


layout constraintBotto.. | none 
visibility | none 


View all properties , * 


图 3.3.2.3 
图 像 右边 到 Layout 右边 的 约束 已 被 添加 。 注 意 在 属性 栏 中 也 可 以 看 到 约束 。 属 性 栏 中 被 
和 矩形 框 起 来 的 代表 了 Layout 的 边 ， 被 圆 形 框 起 来 的 代表 了 一 个 约束 。“8” 这 个 值 表示 两 个 控 
件 的 边 之 间 的 空白 的 距离 ， 它 其 实 是 图 像 控 件 的 “layout marginRight” 属 性 ， 如 图 3.3.2.4 所 示 。 


layout height 200dp 
Constraints 

Layout Margin [?, ?, ?, 8dp, ?] 
layout margi 

layout margi 

layout margi 


layout margi 


layout margi 8dp 


layout margi mcm 


layout margi 


Padding I ?, ?, ? ?] 
Theme 
elevation 
图 3.3.24 
现在 运行 App 看 看 ， 是 不 是 靠 右 了 ? 真 的 很 简单 又 好 玩 ! 怎样 让 图 像 靠 下 呢 ? 我 就 不 讲 
了 了 ， 你 目 己 想 吧 ， 以 你 的 智慧 肯定 能 做 到 ， 我 看 好 你 哦 。 
3.3.3” 子 控件 在 ConstraintLayout 中 横向 居中 
其 实 很 简单 ， 我 只 要 在 上 面 的 基础 上 再 添加 一 个 靠 左 的 约束 就 行 了 ， 如 图 3.3.3.1 Pr. 
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- EB ©- [Nexs4- 225- OAppTheme Properties q e| Xt. c! 


rum 


layout width 200dp 


layout height 200dp 

ImageView 

srcCompat | (3 drawable/female "t 
contentDescription | | 
background | | 


scaleType 
adjustViewBounds |- 
cropToPadding | 一 | 
Favorite Attributes 
focusablelnTouchMode  [-) 


layout constraintBotto.. none 


visibility 


3.3.3.1 


看 到 这 个 效果 你 是 不 是 感觉 很 直观 ? Constraint 就 像 弹 得 ， 如 果 左 右 都 有 弹 短 拉 它 并 且 左 
右 受 力 相 等 的 话 ， 它 就 位 于 中 央 了 。 
上 下 居中 我 就 不 用 再 讲 了 吧 ? 我 相信 以 看 官 你 的 机 智 肯定 能 摘出 来 。 


3.3.4 子 控件 在 ConstraintLayout 中 居中 偏 左 


现在 图 像 左右 大 中 了 , 但 是 我 们 还 不 满足 , 我 希望 它 大 中 再 偏 左 一 点 ， 最 好 在 四 分 之 一 处 
大 中 而 不 是 在 二 分 之 一 处 大 中 ， 这 样 没 问题 ， 这 就 用 到 这 个 东西 ， 如 图 3.3.4.1 所 示 。 


Properties Q Le] w- >l 


ID imageView2 


图 3.3.4.1 


它 中 间 有 个 值 “50” 表 示 了 左右 两 个 约束 的 力量 ， 现 在 是 50:50， 拖 动 它 试 试 吧 。 比 如 我 
拖 到 了 25 的 位 置 上 ， 如 图 3.3.4.2 所 示 。 
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d HE © ~ []Nexus4- i925 ~ Properties 
tx 4 OB... i Å ^ 


"V B8 7:00 
AndFirstStep 


layout width 200dp 


layout height 200dp 


ImageVi 


srcCompat &»drawable/female 
contentDescription 


background 


scaleType 


3.3.42 


f n] LAESA [ELER RAE X, 7c 98981] 7J ROSE EG, 1090322 73 X. mA. [HIS MERR 
一 个 问题 ， 纵 同上 没有 这 个 东西 。 其 实 是 有 的 ， 当 你 在 纵 同 上 增加 约束 之 后 ， 它 就 现时 了 。 


3.855 子 控件 A 在 子 控件 B 的 上 面 


为 了 演示 两 个 控件 之 间 的 相对 位 置 约束 , 我 们 需要 再 添加 一 个 新 的 控件 , 就 添加 一 个 按钮 
吧 ， 我 们 最 终 让 按钮 位 于 图 像 的 上 面 。 但 在 此 之 前 , 我 需要 为 图 像 控 件 添加 纵向 的 约束 ,我 先 
让 它 横 回 纵 回 都 盾 中 ， 如 图 3.3.5.1 所 示 。 


EB ©- 口 Nexus4* 325 - Properties Q let Xt. -l 


p E B 4 T | 
x+ IH ID imageView2 


AndFirstStep 


layout width 200dp 


layout height 200dp 
ImageView 
srcCompat («o drawable/female 


contentDescription 
background 

scaleType 
adjustViewBounds | 
cropToPadding 
Favorite Attributes 


focusablelnTouchM... — 


layout constraintBo... parent 


3.3.51 


下 面 再 拖 一 个 按钮 进来 ， 如 图 3.3.5.2 所 示 。 
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Q 2$- i 


Ab TextView 


Button 
Component Tree 
AJ ConstraintLayout 
A imageView2 


E m BE S- DNeus4- 225 ~ 
a | 
多 ToggleButtc | LOC 


CheckBox - 


a e ES +0 [en g 
I +X + = |E : 


*8700 
AndFirstStep 


BUTTON 


El 3.3.52 


拖 进来 后 ， 这 个 按钮 由 于 没有 约束 ， 所 以 会 跑 到 左上 角 去 。 下 面 我 们 为 它 添 加 约束 。 要 想 
让 它 在 图 像 的 上 面 ， 那 么 就 从 按钮 的 下 边界 拖 约 束 到 图 像 的 上 边界 ， 如 图 3.3.5.3 所 示 。 


M Nexus 4 ~ 3925 ~ 


4c 
d |F 


AndFirstStep 


Properties 


layout_width wrap_content 
layout_height 
Button 

style buttonStyle 
background 


wrap_content 


backgroundTint 
stateListAnimator 


elevation Q= 


visibility 


onClick 
TextView 
text 

# text 


3.3.5.3 


3.8.0 子 控件 A 与 子 控件 B 左边 对 齐 


上 一 节 的 页 面 中 ， 按 钮 在 横向 上 没有 约束 ， 所 以 它 默 认 靠 左 了 ， 看 着 不 舒服 ， 我 们 让 按钮 
的 左边 与 图 像 的 左边 对 齐 吧 ， 如 图 3.3.6.1 所 示 。 
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layout width wrap content 


layout height wrap content 


Button 

style buttonStyle 
background 

backgroundTint 
stateListAnimator 


elevation 


visibility 
onClick 


TextView 
text 


# text 


Kd 3.3.6.1 
可 以 看 到 两 条 优美 的 曲线 揭示 了 约束 的 存在 。 不 过 , 仔细 看 的 话 , 会 发 现 按钮 的 左边 与 图 
像 的 左边 还 有 一 点 差距 ， 没 有 完全 对 齐 ， 这 其 实 是 按钮 的 margin 在 起 作用 ， 你 要 把 它 的 左 
margin 改 为 0dp， 如 图 3.3.6.2 所 示 。 


: Ell Q- [Neus4- 25- WD AppTheme Properties 
x 5 四 button 
0 CO co 


100 i 
NA 
NA 
NA 

222? <<< 

^ 
^ 

ES 


AndFirstStep 


| 


layout width wrap content 


layout height wrap content 
Button 
style buttonStyle 


3.3.62 


3.8.7 ”设置 子 控件 的 宽 和 高 


以 图 像 控 件 为 例 ， 当 前 其 宽 和 高 为 固定 值 ， 在 属性 栏 中 可 以 看 出 来 (图 3.3.7.1) 。 注 意 红 
线 框 出 的 图 形 , 这 个 样子 就 表示 固定 值 , 值 是 多 少 呢 ? 下 面 的 “layout width” 和 “1layout height" 
的 值 就 是 。 当 你 在 红 框 中 的 图 形 上 点 一 下 鼠标 时 ， 会 发 现 图 形 发 生 了 变化 ， 如 图 3.3.7.2 所 示 。 


一 一 
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Properties 


200dp 


@drawable/female 


contentDescription 


background 


scaleType 


adjustViewBounds | 


layout width 200dp 
cropToPadding 


layout height 200dp Fovorite Attribute 
avo utes 


ImageView 


图 3.3.7.1 图 3.3.72 
DEAE BY, TARKET, IRERE AE, AeA, o UAE $J 
layout width 的 值 变 成 了 “0dp”， 此 时 只 要 两 边 没 其 他 控件 来 挤占 它 的 空间 ， 它 就 会 充满 整 
个 控件 ， 此 时 在 预览 图 中 可 以 看 到 图 像 的 宽度 充满 了 整个 父 控件 ， 如 图 3.3.7.3 所 示 。 


P 8 7:00 
AndFirstStep 


2x53 


3.8.8 子 控件 的 宽 和 高 保持 一 定 比 例 

我 们 把 图 像 控 件 搞 成 宽 高 按 2:1 固定 吧 。 

为 了 更 容易 看 出 效果 ， 我 们 给 图 像 控 件 设置 一 下 背景 。 设 置 背 景 就 是 设置 控件 的 
background 属性 。 可 以 设置 一 种 颜色 ， 也 可 以 设置 一 个 图 像 。 先 选中 图 像 控 件 ， 再 在 属性 栏 中 
点 图 3.3.8.1 所 示 的 按钮 。 
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ImageView 
srcCompat | Gdrawable/female 


contentDescription | 


background 


3.3.81 


出 现 资源 选择 对 话 框 ， 选 择 一 种 颜色 即 可 ， 如 图 3.3.82 所 示 。 


Add new resource * 


Drawable Name: holo blue bright 
R black 


Color 


darker gray 


holo blue bright 


2385 


设置 背景 后 ， 再 来 做 一 下 图 像 控 件 的 宽 高 比 。 还 是 先 选 中 图 像 控 件 ， 然 后 在 属性 栏 中 点 红 
色 箭 头 所 指 的 位 置 ， 如 图 3.3.8.3 所 示 。 于 是 在 下 面 的 红 杠 位置 出 现 了 叫 作 ratio ER) 的 输 
入 控件 ， 可 以 看 到 默认 是 1 比 1， 现 在 预 贞 图 中 出 现 图 3.3.8.4 所 示 的 效果 。 


AndFirstStep 


Properties Q => 3- ^l 


ID imageView2 


| 
| Toggle Aspect Ratio Constraint 


layout width Odp 


layout height 200dp 


3.3.8.3 3.3.8.4 
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可 以 看 到 图 像 的 宽度 收回 来 了 ， 与 高 度 保 持 了 1:1， 注 意 此 时 的 layout width 和 
layout height， 对 它们 的 值 是 有 一 定 要 求 的 ， 比 如 如 果 这 两 个 值 全 都 不 是 0dp， 那 么 比率 就 不 
起 作用 了 , 这 里 和 面 其 实 是 个 优选 级 的 问题 , 就 是 有 了 冲突 谁 优 先 起 作用 。 所 以 要 使 比例 起 作用 ， 
宽 和 高 必须 有 一 个 为 0dp， 而 另 一 个 不 能 为 0dp， 可 以 为 match parent， 可 以 为 wrap content, 
也 可 以 是 大 于 0dp 的 固定 的 值 。 让 我 们 改 成 2:1， 表 示 宽 是 2， 高 是 1， 出 现 如 图 3.3.8.5 所 示 
效果 ， 实 际 上 由 于 图 像 太 宽 ， 已 超出 了 显示 区 ， 我 们 把 高 度 改 小 一 些 ， 比 如 改 成 100dp， 效 果 
如 图 3.3.8.6 所 示 。 


bd 700 *P 87:06 
AndFirstStep AndFirstStep 


3.3.8.5 图 3.3.8.6 


18 13454, layout 文件 的 源码 变 成 什么 样 了 呢 ? PS: 


<?xml version-"1.0" encoding-"utf-8"?» 

«android.support.constraint.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


«ImageView 
android:id-2"8-«id/imageView2" 
android:layout width-"Odp" 
android:layout height-"100dp" 
android:layout marginBottom-"8dp" 
android:layout marginLeft-"8dp" 
android:layout marginRight-"8dp" 
android:layout marginTop-"8dp" 
android:adjustViewBounds-"false" 
android:background-"G8android:color/holo blue bright" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintDimensionRatio-"w,2:1" 
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app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toTopOf-"parent" 
app:layout constraintVertical bias-"0.498" 
app:srcCompat-"Qdrawable/female" /> 


«Button 
android:id-"Q8-c-id/button" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Button" 
android:layout marginBottom-"8dp" 
app:layout constraintBottom toTopOf-"G8-cid/imageView2" 
android:layout marginLeft-"Odp" 
app:layout constraintLeft toLeftOf-"(*id/imageView2" /> 
«/android.support.constraint.ConstraintLayout» 


排版 方法 之 RelativeLayout 


其 实在 ConstraintLayout 出 来 之 前 ，Android 推荐 的 排版 控件 是 RelativeLayout。 它 的 能 力 
与 ConstraintLayout 差不多 ,也 是 专用 于 设计 复杂 的 排版 。 它 与 ConstraintLayout 的 区 别 是 ， 它 
对 于 鼠标 拖 放 的 方式 来 布局 控件 支持 得 不 好 , 比如 我 用 它 时 更 喜欢 直接 在 属性 栏 中 设置 与 位 置 
相关 的 各 种 属性 来 对 子 控件 进行 排版 ， 非 常 腑 烦 。 

虽然 Android 现在 推荐 的 排版 控件 是 ConstraintLayout, 但 是 RelativeLayout 依然 可 用 。 因 
为 你 有 可 能 要 面 对 一 些 旧 代码 ， 所 以 有 必要 把 它 搞 清楚 ， 而 且 后 面 我 用 RelativeLayout 实现 了 
一 个 登录 界面 , 其 实现 过 程 与 ConstraintLayout 差不多 , 所 以 你 在 用 ConstraintLayout 实现 相同 
的 界面 时 ， 可 以 参考 这 里 的 做 法 。 

Relative 的 意思 是 关系 ， 也 就 是 它 里 面 的 子 控件 之 间 可 以 设置 相对 位 置 关系 ， 其 实 这 跟 
ConstraintLayout 的 作用 差不多 。 可 以 在 这 里 找到 RelativeLayout， 如 图 3.4.1 所 示 。 


Palette 


Common $$$ 

:三 ListView 

C3 TabHost 

Ili RelativeLayout 
Widgets — sss GridView 
Layouts 


Text 


Buttons 


Containers 


Google 
Legacy 
Project y cn n NN 


Component Tree 
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3.4.1 把 ConstraintLayout 改 为 RelativeLayout 


新 建 的 Activity 默认 都 用 ConstraintLayout 作为 内 容 区 的 最 外 层 控 件 ， 所 以 我 们 要 使 用 
RelativeLayout 时 有 两 种 办 法 : 一 是 将 一 个 RelativeLayout XE ConstraintLayout 中 作为 儿子 ， 
二 是 将 ConstraintLayout 改 为 RelativeLayout。 显 然 第 二 种 方式 更 干 滔 , 不 易 受 干扰 ， 所 以 我 选 
择 第 二 种 方式 玩 RelativeLayout。 

首先 把 现在 layout 文件 中 的 控件 都 删 摊 ， 删 除 的 方法 呆 ， 选 中 控件 点 删除 键 即 可 。 最 后 只 
剩 下 ConstraintLayout。 把 ConstraintLayout 改 为 RelativeLayout， 需 要 改 源码 。 点 “Text” 打 开 
源码 ， 如 图 3.4.1.1 所 示 。 


Iii activity main.xml x | 


l <?xml version="1.0" encoding="utf-3"?> 
3 xmlns:androidz"http://schemas.android.com/apk/res/android" 
xmlns:appz"http://schemas.android.com/apk/res-auto" Til 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-z"match, parent" 

android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


11 


Lm 
局 0: Messages : Q Event Log (*] Gradle Console 
" Q a go T . D 


3.4.1.1 


把 android.support.constraint.ConstraintLayout 改 为 RelativeLayout, 现在 整个 Layout 文件 的 
源码 变 成 了 这 样 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«RelativeLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


«/RelativeLayout» 


现在 界面 空 了 ， 我 们 拖 一 个 图 像 控 件 进 来 ， 然 后 为 它 设置 图 像 ， 最 终 效 果 如 图 3.4.1.2 所 示 。 


EB ©- 口 Nexus4- mé25- 全 AppTheme Properties 《429 3- 一 
O7% 0O 0G 4 E p imageView2 
209 300 layout_width wrap_content 


layout_height wrap_content 
ImageView 


srcCompat (9 drawable/fernale 


contentDescripti... 


background 


scaleType none 


adjustViewBounds [=] 


34.12 
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我 把 图 像 控 件 放 到 了 左上 角 。 现 在 属性 栏 中 看 不 到 使 用 ConstraintLayout 时 的 那些 控件 了 ， 
要 了 解 一 个 控件 的 layout 位 置 ， 只 能 去 属性 栏 中 看 那些 与 layout 有 关 的 属性 的 值 。 现 在 进入 
“View all properties” 视 图， 确保 选中 了 图 像 ， 可 以 看 到 其 属性 设置 如 图 3.4.1.3 所 示 。 


layout width wrap content 
layout height wrap content 
» Layout Margin 
* Padding 
» Theme 
elevation 


layout alignParentLeft 


layout alignParentStart 


layout alignParentTop 
srcCompat 


d rawable/female 


图 3.4.1.3 


红 框 框 起 来 的 是 三 个 与 位 置 有 关 的 属性 : 第 一 个 是 与 父 控件 的 左边 对 齐 , 第 二 个 是 与 父 控 
件 的 开始 对 齐 ， 第 三 个 是 与 父 控件 的 顶部 对 齐 。 其 中 alignParentLeft 与 alignParentStart 作用 完 
全 一 样 , 都 是 表示 左边 ,但 是 Left 是 旧 的 叫 法 ,新 版 API 中 都 改 叫 Start. 了 。 你 可 以 只 设置 Start， 
而 这 两 个 都 设置 的 话 ， 带 来 的 好 处 是 ， 可 以 让 你 的 代码 在 旧 的 编译 工具 中 被 正确 编译 。 

不 知 你 是 否 注 意 到 ， 当 你 把 一 个 控件 拖 进 RelativeLayout 中 时 ， 会 出 现 箭头 指示 ， 它 表示 
被 拖 的 控件 与 谁 发 生 了 相对 位 置 和 关系 。 可 以 为 控件 设置 很 多 种 layout 属性 ， 这 些 属性 都 以 

“layout” 开头 ， 在 属性 栏 中 同 下 滚动 才能 看 到 。 看 图 3.4.1.4 所 示 的 这 一 堆 layout 属性 吧 ， 
要 理解 它们 的 作用 其 实 也 不 难 ， 查 一 下 各 单词 的 意思 就 行 了 。 


keepScreenOn 

labelFor 

layerType 

layoutDirection 

layout above 

layout alignBaseline 
layout alignBottom 
layout alignEnd 

layout alignLeft 

layout alignParentBottom 
layout alignParentEnd 
layout alignParentRight 
layout alignRight 

layout alignStart 

layout alignTop 

layout alignWithParentlfMissing [-) 
layout below 

layout centerHorizontal 

layout centerinParent 


layout centerVertical 


Kl 3.4.1.4 
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xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 

android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 
«ImageView 


android:id="@+id/imageView2" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout alignParentLeft-"true" 
android:layout alignParentStart-"true" 
android:layout alignParentTop-"true" 
app:srcCompat-"8drawable/female" /> 
«/RelativeLayout» 


RelativeLayout 也 可 以 玩 出 与 ConstraintLayout 差不多 的 知识 ， 下 面 就 让 我 们 玩 一 玩 。 


342 左右 对 齐 与 居中 


图 像 控 件 现 在 位 于 最 左上 角 。 如 果 要 靠近 左上 解 并 保持 一 定 的 距离 , 请 设置 layout Margin 
属性 。 其 实在 ConstaintLayout 中 控件 之 间 的 空白 也 是 通过 这 个 属性 设置 的 。 
让 图 像 居 中 ， 选 哪些 属性 呢 ? 直接 上 图 〈 见 图 3.4.2.1) 。 


入 | 已 appr b ^ d$ b hE XX E C: 


apeo ($5 


Properties 


layout alignTop 

layout alignWithParentifMi[- ) 
layout below 

layout centerHorizontal v 
layout centerinParent [ 
layout centerVertical 
layout toEndOf 

layout toLeftOf 

layout toRightOf 

layout toStartOf 
longClickable 

maxHeight 

maxWidth 


3.4.2.1 


我 选中 了 center horizontal (横向 居中 ) 和 center vertical (纵向 居中 ) 。 其 实 你 也 可 以 不 选 
这 两 个 ， 而 是 只 选 center in parent 〈 在 老 爸 中 居中 ) 。 

但 是 现在 看 起 来 并 没 拓 中 。 这 是 因为 在 拖 入 时 , 设置 了 靠 上 和 靠 左 , 它们 之 间 是 有 冲突 的 ! 
一 个 控件 不 能 既 靠 上 靠 左 又 要 拓 中 吧 ? 把 冲突 去 掉 吧 ， 我 们 要 居中 ， 只 能 把 靠 左 笔 上 去 掉 了 。 
怎么 去 掉 就 不 用 我 再 演示 了 吧 ? 

在 排版 上 设置 正确 了 ， 你 的 App 的 界面 就 可 以 放 之 四 海 而 缘 可 居中 了 。 比 如 我 们 把 虚拟 
机 旋转 一 下 ， 看 看 横 屏 时 是 不 是 还 会 后 中 ?如 图 3.4.2.2 所 示 。 
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图 3.4.2.2 


图 3.4.2.2 中 红 框 内 的 两 个 图 标 就 是 旋转 虚拟 机 的 ， 很 好 玩 哦 。 

下 面 是 几 种 对 齐 的 方案 ， 都 试 一 下 吧 : 

@ 上 下 居中 ， 横 向 靠 右 : 

layout centerVertical + layout allgnParentRlght。 

e 上 下 居中 ， 横 向 靠 左 : 

layout centerVertical + layout alignParentLeft. 

e 纵向 靠 下 ， 横 向 居中 : 

Layout centerHorizontal-layout alignParentBottom. 

其 实 你 只 要 认识 几 个 单词 , 即 align (对 齐 )、parent (父母 , 就 是 包含 所 操作 控件 的 容器 ) 、 
left (左边 ) ~ right CH) top (Iii) . bottom (底部 ) width C) 、height CR) 等 ， 
就 可 以 知道 那些 layout 属性 的 作用 了 。 


3.4.3 元 满 整个 父 控件 

需 这 样 设 置 : layout width-"match parent"， 并 且 layout height-"match parent"。 大 家 可 以 
看 到 充满 整个 父 控件 后 ， 图 像 被 拉 伸 变 模糊 了 。 为 了 更 能 清楚 地 看 到 图 像 控件 的 大 小 , 我们 可 
以 把 控件 的 背景 (background) 设置 为 一 种 颜色 (默认 是 透明 的 ) ， 如 图 3.4.3.1 所 示 。 


accessibilityTraversalAfter 


accessibilityTraversalBefor: 


adjustViewBounds 
alpha 


backgroundTint 
backgroundTintMode 
baseline 
baselineAlignBottom 
clickable 


contentDescription 


图 3.4.3.1 


选中 图 像 控件 ， 然 后 在 background 属性 行 靠 右 的 “...” 图 标 上 点 一 下 ， 就 会 出 现 Drawable 
选择 对 话 框 ， 如 图 3.4.3.2 所 示 。 
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Add new resource v 


Name | colorAccent 


colo 


1 Saving this color will override existing resource colorAccent. 


rAccen 
. Reference Color 
| colorprimary 


Pink accent 200 


本 站 


™ android 


A: R: 255 |G: 64 B: 129 [Anse p #| FFFF4081 
E background dark -— 


background light 


[s] hlark 


图 3.4.3.2 
你 可 以 选择 一 个 图 像 作为 背景 ,也 可 以 选择 一 个 颜色 。 为 了 容易 观察 ， 我 们 选择 一 个 颜色 
吧 。 现 在 界面 变 成 了 下 面 这 个 样子 ， 如 图 3.4.3.3 所 示 。 


HelloWorld 


D ~- 


3.4.3.3 


3.4.4 兄 种 之 旧 相 对 排 


我 想 这 样 玩 一 下 : 把 图 像 的 放 在 屏幕 中 间 , 然后 弄 一 个 文本 控件 显示 在 图 像 的 上 方 。 图像 
放 中 间 ， 我 们 搞 过 了 ， 所 以 先 把 图 像 放 到 中 间 去 ， 选 中 以 下 两 个 : 


layout centerHorizontal 
layout centerVertical 


但 是 ， 你 还 要 把 下 面 三 条 删 挥 〈( 如 果 被 选中 的 话 〉: 


layout alignParentLeft — ( ) 
layout alignParentStart — ( ) 


layout alignParentTop [5] 
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现在 拖 一 个 文本 控件 CTextViewO 进来 ， 放 到 图 3.4.4.1 所 示 的 位 置 。 可 以 看 到 在 拖 的 过 
程 中 , 会 出 现 一 些 虚 线 和 箭头 ， 桶 黄色 虚线 框 表示 控件 拖 到 的 位 置 ， 蓝 色 虚 线 和 箭头 表示 与 谁 
发 生 了 关系 。 我 们 可 以 看 到 上 图 中 ,被 拖 动 的 控件 右边 与 图 像 控 件 右边 对 齐 了 ， 回 下 的 荫 头 表 
示 被 拖 动 的 控件 的 底部 与 图 像 的 项 部 有 一 个 相对 距离 。 在 我 们 拖 动 完成 后 , 界面 设计 器 会 日 动 
为 我 们 设置 一 些 layout 相关 的 属性 ， 让 我 们 看 一 看 都 设置 了 哪些 。 选 中 TextView 控件 ， 就 可 
以 在 属性 栏 看 到 如 图 3.4.4.2 所 示 的 项 。 


* Layout Margin 


layout margin 

layout marginBottom 
layout marginEnd 
layout marginLeft 


layout marginRight 


layout marginStart 
layout marginTop 


图 3.44.1 


» Padding 

» Theme 
elevation 
layout above 
layout alignEnd 
layout alignRight 
text 


有 四 个 Layout 相关 的 属性 被 设置 : 


€ layout marginBottom : 底部 空白 。 
€ layout above : 在 谁 之 上 。 

€ layout alignEnd : 与 谁 右边 对 齐 。 

€ layout alignRight : 与 谁 右边 对 齐 。 


注意 这 些 项 可 能 不 靠 在 一 起 ， 那 么 你 就 需要 挨个 找 找 ， 甚 至 可 能 会 发 现 已 被 设置 的 layout 
属性 要 比 上 面 的 多 。 
layout abouve 的 值 是 “@+tid/imageView2” 指 回 了 图 像 控 件 ， 在 图 3.4.4.3 中 我 们 可 以 看 
到 图 像 控件 的 ID 的 确 是 “imageView2” (此 时 选中 了 图 像 控 件 ) 。 


Properties 


imageView2 


id 

layout width wrap content 

layout height wrap content 
* Layout Margin [?, ?, ?, ?, ?] 


layout margin 

layout marginBottom 
layout marginEnd 
layout marginLeft 
layout marginRight 


layout marginsStart 


layout marginTop 


图 3.4.4.3 
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再 说 一 下 padding 属性 。padding 是 内 部 空白 的 意思 ， 是 控件 的 边 到 其 内 容 之 间 的 空白 ， 
Lj margin 效果 看 起 来 差不多 但 实际 很 不 一 样 。 现 在 文本 控件 的 layout marginBottom 的 值 是 
17dp， 就 是 说 文本 控件 的 底 边 与 其 他 控件 之 间 要 空 出 17dp， 于 是 我 们 就 看 到 了 文本 控件 与 图 
像 控 件 之 间 有 一 定 的 距离 。 你 可 以 改 个 其 他 值 试 试 。 文本 控件 的 layout above 的 值 是 图 像 控 件 
的 4， 表 示 文 本 控件 要 在 图 像 控 件 的 上 面 。 

运行 App, 旋转 屏幕 看 看 , 是 不 是 它们 的 相对 位 置 是 不 变 的 ?现在 的 layout 源码 是 这 样 的 : 


<?xml version-"1.0" encoding="utf-8"?> 

«RelativeLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


«ImageView 
android:id-"Q8-cid/imageView2" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout centerHorizontal-"true" 
android:layout centerVertical-"true" 
android:background-"8color/colorAccent" 
app:srcCompat-"Qdrawable/female" /> 


«TextView 
android:id-"Qc*id/textView2" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 


android:layout above-"Q-cid/imageView2" 

android:layout alignEnd-"Q-id/imageView2" 

android:layout alignRight-"G-id/imageView2" 

android:layout marginBottom-"l7/dp" 

android:text-"TextView" /» 
«/RelativeLayout» 


3.4.5 dp 是 什么 


dp 是 一 个 表示 距离 的 单位 。 我 并 不 想 说 清楚 它 是 怎么 计算 的 ， 网 上 有 的 是 文章 。 我 只 想 
说 它 是 与 像素 无 关 的 单位 ， 它 几乎 等 同 于 实际 的 物理 距离 单位 。 

试想 ， 一 个 像素 是 100X 100 的 图 像 ， 在 不 同 的 屏幕 上 按 像素 显示 时 会 是 什么 样 的 ? 如 果 
一 个 5 寸 老 屏幕 ， 其 宽度 上 像素 数 是 480， 那 么 这 个 图 像 在 宽度 上 占 约 五 分 之 一 。 而 如 果 在 一 
个 5 寸 的 高 分 屏 上 显示 的 话 ， 假 设 这 个 屏幕 的 宽 是 1080 个 像素 ， 那 么 这 个 图 像 只 占 到 十 分 之 
一 ， 别 忘 了 这 两 个 都 是 五 寸 ， 实际 大 小 一 样 ,但 看 到 的 图 像 的 实际 大 小 差 一 倍 ， 有 可 能 小 到 手 
指头 很 难点 到 它 了 。 
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所 以 不 能 用 像素 为 单位 指定 控件 的 大 小 ， 而 使 用 “dp ”， 指 定 一 个 与 分 辩 率 无 天 的 实际 义 
寸 。 在 指定 距离 和 大 小 的 地 方 ， 千 万 不 要 瑟 记 这 个 单位 。 


34.6 ”使 用 RelativeLayout 设计 登录 页 面 


下 面 我 们 玩 点 复杂 的 : 设计 一 个 登录 页 面 。 这 个 登录 页 面 大 体 上 是 这 样 : 最 上 面 是 一 个 头 
像 ， 中 间 是 用 户 名 输入 框 ， 其 下 是 密码 输入 框 ， 最 下 面 的 登录 按钮 。 

先 想 一 下 怎么 设计 。 为 了 美观 一 些 , 我 们 希望 这 些 内 容 整 体 大 中 显示 ,这 里 指 的 是 纵 同 上 
的 大 中。 因为 屏幕 一 般 都 是 竖 着 看 的 。 文 本 输入 控件 和 按钮 控件 都 可 以 把 高 度 设置 为 
“wrap_content”， 这 样 它们 的 高 就 由 其 文本 的 字体 大 小 决定 ， 这 个 值 不 会 太 大 。 图 像 控 件 的 
大 小 也 由 内 容 (也 就 是 图 像 ) 来 决定 的 话 ， 束 不 合适 了 ， 可 能 很 小 ， 也 可 能 很 大 。 所 以 我 们 应 
该 把 图 像 控 件 设置 成 合适 的 固定 大 小 ,然后 让 图 像 以 保持 比例 缩放 来 自 适 应 地 填充 到 图 像 控 件 
H. 总 之 ， 一 般 情况 下 ， 我 们 都 是 为 图 像 控 件 指定 固定 的 大 小 。 而 对 于 文本 输入 控件 我 也 不 想 
让 它们 在 横 癌 上 充满 整个 父 控件 ， 所 以 我 对 它们 的 宽 也 设置 固定 值 ， 而 高 就 由 其 内 容 诀 定 。 

纵 问 上 的 居中 怎么 搞 才 好 看 呢 ? 如 果 让 图 像 在 纵 同 上 居中 , 其 他 控件 以 它 为 基准 往 下 摆 的 
话 ， 整 体内 容 看 起 来 就 会 偏 下 , 不 如 以 图 像 下 面 的 用 户 名 输入 框 为 基准 。 把 用 户 名 输入 框 设置 
为 在 容器 控件 中 纵 癌 居中 ， 其 他 控件 都 以 它 为 基准 ， 在 它 上 面 或 下 面 摆 放 。 从 上 到 下 依次 为 : 


e 图像 控 件 

e 用 户 名 输入 框 
e 帘 码 输入 框 

e 登录 按钮 


其 中 用 户 名 输入 框 纵 癌 拓 中 ， 其 余 控 件 在 纵 同 上 以 它 为 基准 摆 放 。 
下 面 让 我 们 一 步 一 步 设 计 出 这 个 登录 界面 。 
3.4.6.1 添加 用 户 名 输入 控件 


还 是 修改 当前 的 Activity 的 界面 (res/layout/activity main.xml, Anl 3.4.4.1 所 示 ) ， 在 当 
前 的 基础 上 改造 一 下 。 我 们 还 是 先 把 “Hello World” 这 个 文本 控件 删 掉 吧 ， 用 不 着 它 了 。 

当前 ， 图像 控 件 处 于 纵向 居中 , 我 们 先 把 它 移 到 左上 角 , 等 摆好 了 用 户 名 输入 框 再 摆 放 它 
的 位 置 。 很 简单 ， 在 源码 中 把 图 像 控 件 的 位 置 相关 的 属性 删 掉 : 


«Imageview 
android :id="@+id/imageview2" 
android:layout widthz"wrap content" 
android:layout height-" wrap content" 
android:layout centerHorizontal-"true 


android:layout centerVertical-" true" 


android:background-"(jcolor/colorAccent" 
app:srcCompat-"Qdrawable/female" /> 


下 面 ， 拖 一 个 文本 输入 控件 到 页 面 内 ， 在 “Text” 组 中 拖 了 一 个 “Plain Text” 控 件 到 页 面 
中 ， 当 看 到 横向 和 纵 癌 上 的 对 齐 线 都 出 现时 ， 放 开 它 ， 如 图 3.4.6.1.1 所 示 。 


56 


第 3 章 UI 资源 与 Layout 


Palette Q 3t- !- [B du ©- D Nexus 4+ x257 ®© 


All 国 
Widgets & Password 
“a Password (Nu i 


1 Layou @ E-mail 
Container # Phone : *870 
Images ft Postal Address 
Date 三 Multiline Text 
Transitions © Time : 


Plain Text 
1 Component Tree 


1 RelativeLayout 
网 imageView2 


图 3.4.6.1.1 
当然 你 可 以 不 用 拖 到 合适 的 位 置 就 放 开 它 , 但 之 后 需要 手动 设置 其 layout 相关 属性 进行 位 
置 调整 。 我 们 不 想 让 这 个 输入 控件 在 横向 上 充满 整个 空间 ， 所 以 为 它 设 置 一 个 固定 的 宽度 : 
300dp， 现 在 ， 这 个 文本 输入 控件 与 layout 有 关 的 属性 如 图 3.4.6.1.2 所 示 。 


alpeJD (sj 


Properties Q el ÓXt- ^! 
id editText 
layout width 300dp 
layout height wrap content 
Layout Margin [?, ?, ?, ?, ?] 
Padding [2, ?, ?, ?, ?] 
Theme 
elevation 
ems 10 
inputType [textPersonName] 


layout centerHorizontal — Ej 


layout centerVertical v 


text Name 


图 3.4.6.1.2 


注意 ，“Text” 这 个 组 下 有 很 多 控件 ， 比 如 “Email”“Phone” 等 。 这 些 控件 用 于 输入 不 
同 的 文本 格式 ,， “Email” 是 专门 输入 邮箱 地 址 的 控件 , “Phone” 是 专门 输入 电话 号 码 的 控件 。 
但 是 ， 其 实 它 们 是 同一 个 Java 类 〈 这 个 控件 的 类 叫 作 “EditText”) ， 只 是 把 EditText 的 某 些 
属性 预 设 成 了 不 同 的 值 , 我 们 完全 可 以 自己 改变 这 些 值 .我 们 现在 使 用 了 最 通用 的 一 种 :“Plain 
Text”， 对 输入 文本 的 格式 没什么 限制 ， 因 为 用 户 名 一 般 都 没 限 制 。 

只 有 文本 输入 控件 还 不 行 , 我 们 还 要 有 提示 性 文字 ， 以 告诉 用 户 这 个 地 方 应 输入 什么 ， 以 
前 都 是 弄 一 个 文本 显示 控件 (比如 TextView) ， 放 在 输入 框 的 左边 或 上 边 ， 提 示 应 输入 什么 ， 
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现在 的 做 法 变 了 , 直接 在 输入 框 中 提示 。 在 Android 中 很 容易 做 到 ， 只 需 设 置 输入 控件 的 “hint 
(提示 ) ”属性 〈 请 仔细 寻找 ) : 


你 还 需要 把 输入 控件 的 默认 内 容 清 除 反 ， 找 到 它 的 “text” 属 性 ， 把 里 面 的 内 容 清 掉 : 


# targetApi 
text 


textAlignment 


现在 这 个 控件 的 样子 是 这 样 的 : 


因为 其 他 控件 要 相对 它 的 位 置 摆 放 ， 需 要 要 引用 它 ， 所 以 我 们 还 要 设置 它 的 ID， 为 它 的 
ID 设置 一 个 有 意义 的 名 字 : 
ediTexNamd | | 


layout width 300dp 
3.4.6.2 ”添加 密码 输入 控件 
拖 一 个 “Password” 控 件 到 界面 上 ， 如 图 3.4.6.2.1 所 示 “〈 注 意 指 示 相 对 位 置 的 箭头 ) 。 


a Plain Text E EH 


*à Password (N 
(9 E-mail 
Containers # Phone 
Images ft Postal Address 
Date 三 Multiline Text 
Transitions © Time 


Password 


l Component Tree 
-  t*RelativeLayout 
网 imageView2 
»» editTextName 
sbc editText2 


图 3.4.6.2.1 


设置 其 layout 属性 为 左右 边界 都 与 用 户 名 输入 框 的 左右 边界 对 齐 ( 这 样 就 与 用 户 名 输入 框 
宽度 保持 一 致 了 ), 纵向 上 位 于 用 户 名 输入 框 下 面 24dp; 并 为 它 设 置 有 意义 的 卫 , 如 网 3.4.6.2.2 
所 示 。 
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Properties 
id editTextPassword 
layout width wrap content 


layout height wrap content 
Layout Margin [?, ?, 24dp, ?, ?] 
layout margin 
layout marginTop 24dp 
layout marginBottom 
layout marginEnd 
layout marginLeft 
layout marginRight 
layout marginStart 
Padding [2 ?, 2, ?, ?] 
Theme 
elevation 
ems 10 
hint 请 输入 密码 
inputType [textPassword] 
layout alignEnd @+id/editTextName 
layout alignLeft (»^ id/editTextName 
layout alignRight (9 id/editTextName 
layout alignsStart (9 * id/editTextName 
layout below (9 * id/editTextName 


3.4.6.2.2 
现在 layout 源码 看 起 来 这 样子 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«RelativeLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


«ImageView 
android:id-"8-cid/imageView2" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:background-"8color/colorAccent" 
app:srcCompat-"8Qdrawable/female" /> 


«EditText 


android:id-"Q-cid/editTextName" 
android:layout width-"300dp" 
android:layout height-"wrap content" 
android:layout centerHorizontal-"true" 
android:layout centerVertical-"true" 
android:ems-"10" 
android:hint=" 请 输入 用 户 名 " 


android:inputType-"textPersonName" /> 


<EditText 
android:id="@+id/editTextPassword" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 


UI 资源 与 Layout 
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android:layout alignEnd="@+id/editTextName" 
android:layout alignLeft="@+id/editTextName" 
android:layout alignRight="@+id/editTextName" 
android:layout alignstart="Q@+id/editTextName" 
android:layout below="@+id/editTextName" 


android:layout marginTop-"24dp" 
android:ems-"10" 
android:hint=" 请 输入 密码 " 


android:inputType-"textPassword" /> 


«/RelativeLayout» 


3.4.6.3 ”添加 登录 按钮 


拖 一 个 按钮 进来 ， 放 到 密码 框 下 面 ， 如 图 3.4.6.3.1 所 示 。 设置 属性 使 它 与 用 户 名 框 左右 边 
界 对 齐 ， 并 改变 其 显示 的 标题 为 “登录 ”， 如 图 3.4.6.3.2 所 示 。 


Properties 


AndFirstStep id buttonLogin 
layout_width wrap_content 


layout height wrap content 
Layout Margin [?, ?, 24dp, ?, ?] 

layout margin 

layout marginTop 24dp 

layout marginBottom 

layout marginEnd 

layout marginLeft 

layout marginRight 

layout marginStart 
Padding 
Theme 
elevation 
layout alignEnd (9 *id/editTextPassword 
layout alignLeft (9 -id/editTextPassword 
layout alignRight @ -id/editTextPassword 
layout alignStart @ -id/editTextPassword 


layout below (à *id/editTextPassword 
text 登录 


图 3.4.6.3.1 3.4.6.3.2 
给 它 一 个 有 意义 的 ID: buttonLogin。 
3.4.08 ”设置 头像 


我 们 依然 利用 现 有 的 图 像 控 件 ， 把 它 的 宽 和 高 都 设置 成 100dp。 把 它 拖 到 左右 大 中 并 在 用 
户 名 框 上 面 一 定 距 离 ， 见 图 3.4.6.4.1， 然 后 稍微 设置 一 下 属性 ， 如 图 3.4.6.4.2 所 示 。 
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Properties 
AndFirstStep id imageView2 

layout width 100dp 

layout height 100dp 

Layout Margin [?, ?, ?, ?, 24dp] 
layout margin 
layout marginBottom 24dp 
layout marginEnd 


layout marginLeft 


layout marginRight 


layout marginstart 
layout marginTop 

Padding 

Theme 

elevation 

background B Ocolor/colorAccent 

layout above (5-id/editTextName 

layout centerHorizontal 


srcCompat (Qdrawable/female 


3.4.64.1 3.4.6.4.2 


最 终 得 到 的 界面 如 图 3.4.6.4.3 所 示 。 


AndFirstStep 


图 3.4.6.4.3 
虽然 不 漂亮 ， 但 也 算 小 清新 了 。 运 行 起 来 看 看 真实 效果 吧 。 
这 个 页 面 Cactivity main.xmD 的 源码 是 : 


«?xml version-"1.0" encoding-"utf-8"?» 
«RelativeLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 


xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 


61 


Android 9 编程 通俗 演义 


android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


«ImageView 
android:id-"Q*id/imageView2" 
android:layout width-"100dp" 
android:layout height-"l00dp" 
android:layout above-"(irid/editTextName" 
android:layout centerHorizontal-"true" 
android:layout marginBottom-"24dp" 
android:background-"8color/colorAccent" 
app:srcCompat-"drawable/female" /> 

«EditText 
android:id-"Q-«*id/editTextName" 
android:layout width-"300dp" 
android:layout height-"wrap content" 
android:layout centerHorizontal-"true" 
android:layout centerVertical-"true" 
android:ems-"10" 
android:hint=" 请 输入 用 户 名 " 
android:inputType-"textPersonName" /> 

<EditText 
android:id="@+id/editTextPassword" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout alignEnd-"G8-*id/editTextName" 
android:layout alignLeft-"Q--id/editTextName" 
android:layout alignRight-"Q*id/editTextName" 
android:layout alignStart-"Q*id/editTextName" 
android:layout below-"Q-cid/editTextName" 
android:layout marginTop-"24dp" 
android:ems-"10" 
android:hint=" 请 输入 密码 " 
android:inputType-"textPassword" /> 

«Button 
android:id-"Q-rid/buttonLogin" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout alignEnd-"GQ-cid/editTextPassword" 
android:layout alignLeft-"Q-c*id/editTextPassword" 
android:layout alignRight-"(*id/editTextPassword" 
android:layout alignStart-"((vid/editTextPassword" 
android:layout below-"(i*id/editTextPassword" 
android:layout marginTop-"24dp" 
android:text-"Xf3*&" /> 

«/RelativeLayout» 
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让 内 容 "$c - 2》 


ARR “R” DELA RREWEE, müibibV RGEOK ! 

首先 把 上 一 节 做 的 登录 页 面 上 再 增加 一 个 按钮 “注册 ”, EER ID. 设 为 “buttonRegister”， 
把 它 放 到 登录 按钮 的 下 面 。 效 果 如 图 3.5.1 所 示 。 然 后 运行 App， 旋 转 一 下 屏幕 看 看 效果 。 我 
的 运行 效果 如 图 3.5.2 所 示 。 


AndFirstStep 


AndFirstStep 


3.5.1 图 3.5.2 


注册 按钮 看 不 到 了 ! 为 什么 ”显然 屏幕 的 高 不 够 了 ， 内 容 在 纵 同 上 超出 了 屏幕 。 于 是 问题 
来 了 : 如 果 屏 幕 显示 不 了 整个 内 容 怎 么 办 ? 答案 很 简单 : “ 快 使 用 滚动 条 ! nm ume t ”然而 ， 
Layout 是 没有 滚动 功能 的 ， 要 想 提 供 滚 动 功能 ， 需 要 使 用 控件 : ScrollView. 

ScrollView 可 以 在 其 儿子 的 高 度 超出 目 己 的 范围 时 ， 在 纵向 上 提供 滚动 功能 。 如 果 想 横 回 
滚动 的 话 ， 请 使 用 另 一 个 View: HorizontalScrollView。 但 是 ScrollView 也 有 自己 的 要 求 : 只 
能 容纳 一 个 孩子 〈 只 生 一 个 好 ) 。 

注意 ScrollView 不 同 于 Layout， 上 所 以 我 们 不 能 用 ScrollView 代替 现在 的 容器 
RelativeLayout 。 其 实 我 们 应 该 让 RelativeLayout 成 为 ScrollView 的 儿子 ， 然 后 再 让 
RelativeLayout 的 高 度 由 其 内 容 决 定 ， 也 就 是 由 组 成 登录 界面 的 各 子 控件 来 共同 决定 。 

RelativeLayout 被 放 在 ScrollView 中 后 ,其 高 度 不 能 再 设 为 match parent 了 ,因为 ScrollView 
需要 根据 其 儿子 的 高 度 决 定 是 否 滚动 , 如 果 其 儿子 的 高 度 永 远 与 它 的 高 一 样 的 话 , 那 永远 不 可 
能 需要 滚动 。 其 儿子 应 体现 出 内 容 的 高 度 ， 这 里 也 就 是 组 成 登录 功能 的 控件 们 所 占 的 高 度 ， 所 
以 RelativeLayout 的 layout height 的 值 必须 为 wrap_content。 下 面 我 们 继续 一 步 步 改 造 。 


3.5.1 添加 ScrollView 作为 最 外 层 容 器 
可 以 拖 一 个 ScrollView 到 页 面 中 ， 如 图 3.5.1.1 所 示 。 
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© Containers 
[RadioGroup 
三 ListView 
HH GridView 
至 ExpandableListView 
ScrollView 
|] HorizontalScrollView 
"* TabHost 
© WebView 
Q, SearchView 
M Images & Media 
E ImageButton 


ScrollVielw 


E ImageView 
B VideoView 
O Date & Time 


3.51.1 


但 是 ， 如 条 你 试 过 了 ， 你 会 友 现 这 样 做 不 行 ， 呵呵 。 因 为 你 无 法 将 一 个 控件 拖 到 页 面 中 作 
为 最 外 层 的 控件 。 此 时 手动 改 源码 更 简单 ， 把 页 面 切 换 到 源码 模式 ， 在 最 外 层 的 元 素 
“<RelativeLayout> ”的 外 面 添加 标记 “<ScrollView>”， 在 RelativeLayout 的 结束 标记 
“</RelativeLayout>” 下 面 添加 ScrollView 的 结束 标记 :“</ScrollView>”, 也 就 是 让 ScrollView 
元 素 包 着 RelativeLayout 元 素 。 
然后 ， 你 还 需要 把 RelativeLayonut 标记 中 的 一 些 属 性 移动 到 ScrollView 标记 中 。 移 动 哪些 
呢 ? 看 这 里 《这些 属性 必须 放 在 最 外 层 的 元 素 中 ) : 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 


xmlns:tools-"http://schemas.android.com/tools" 
tools:context-"niuedu.com.andfirststep.MainActivity" 


你 还 要 为 ScrollView iX ELM. ERARI, MAREE tH T C 
控件 吧 〈 束 是 Activity 了 ) 。 现 在 layout 文件 的 源码 变 成 了 这 样 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«ScrollView 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
tools:context-"niuedu.com.andfirststep.MainActivity" 
android:layout width-"match parent" 


android:layout height-"match parent"» 


«RelativeLayout 


android:layout width-"match parent" 


android:layout height-"match parent"» 


«ImageView 
android:id-"Q-id/imageView2" 
android:layout width-"100dp" 
android:layout height-"100dp" 
android:layout above-"(6*id/editTextName" 
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android:layout centerHorizontal-"true" 
android:layout marginBottom-"24dp" 
android:background-"8color/colorAccent" 
app:srcCompat-"Qdrawable/female" /> 


«EditText 
android:id-"8-cid/editTextName" 
android:layout width-"300dp" 
android:layout height-"wrap content" 
android:layout centerHorizontal-"true" 
android:layout centerVertical-"true" 
android:ems-"10" 
android:hint=" 请 输入 用 户 名 " 


android:inputType-"textPersonName" /> 


«EditText 
android:id-"Qcid/editTextPassword" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout alignEnd-"G8-*id/editTextName" 
android:layout alignLeft-"8*id/editTextName" 
android:layout alignRight-"G8-id/editTextName" 
android:layout alignStart-"G8-cid/editTextName" 
android:layout below-"Q-*id/editTextName" 
android:layout marginTop-"24dp" 
android:ems-"10" 
android:hint=" 请 输入 密码 " 


android:inputType-"textPassword" /> 


«Button 
android:id-"Q-cid/buttonLogin" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout alignEnd-"G8-«id/editTextPassword" 
android:layout alignLeft-"(-id/editTextPassword" 
android:layout alignRight-"8*id/editTextPassword" 
android:layout alignStart-"(*id/editTextPassword" 
android:layout below="@+id/editTextPassword" 
android:layout marginTop-"24dp" 
android:text-"X3e" /> 


«Button 
android:id-"Q8-cid/button2" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout alignEnd-"G8-«*id/buttonLogin" 
android:layout alignLeft-"(-id/buttonLogin" 
android:layout alignRight-"8-id/buttonLogin" 
android:layout alignStart-"8«-id/buttonLogin" 
android:layout below-"G-crid/buttonLogin" 
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android:layout marginTop-"24dp" 
android:text=" 注 册 " /> 


</RelativeLayout> 
«/ScrollView» 


fc np ADREM RRN, MRAR A S, El 3.5.12 所 示 。 


3.5.12 


图 像 跑 到 上 面 去 了 ， 控 件 之 间 的 间距 也 出 了 问题 。 如 何 修复 这 些 错误 呢 ? 请 看 下 节 。 


3.5.2 ”改正 在 ScrollView 下 的 排版 


现在 选中 “RelativeLayout” 看 一 下 ， 你 会 看 到 奇怪 的 现 像 : 虽然 它 的 宽 和 高 都 设置 成 了 
match parent， 但 是 它 却 是 “ 臣 将 做 不 到 啊 ”。. 注意 现在 可 能 在 预 钨 中 很 难 选中 RelativeLayout， 
那么 就 在 控件 树 面 板 中 选 吧 ， 如 图 3.5.2.1 所 示 。 

下 面 是 RelativeLayout 的 宽 和 高 的 设置 ， 如 图 3.5.2.2 所 示 。 


Component Tree 
| îlactivity main (ScrollView) 


v 1 RelativeLayout id 


Tl editTextName layout width match parent 


|. editTextPassword 


or buttondLogin 
E imageView Padding [?, Odp, Odp, Odp, Odp] 


layout height match parent 


Layout Margin EZL6H 


图 3.52.1 图 3.5.2.2 


ScrollView 的 内 容 必 须 有 有 具体 的 高 度 ， 这 样 它 才能 决定 是 否 需 要 滚动 。 所 以 把 
RelativeLayonut 的 高 设置 为 match parent 不 再 起 作用 ， 其 实 RelativeLayonut 的 高 暗中 变 成 了 
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"wrap content" . 

注意 横向 上 是 没 问 题 的 ， 因 为 ScrollView 并 不 提供 横 问 滚动 ， 所 以 它 的 子 控件 横向 上 的 
排版 方式 跟 以 前 一 样 。 下 面 我 们 就 把 登录 界面 调整 好 。 怎 样 调整 呢 ? 现在 要 让 RelativeLayout 
恰好 包 痢 整个 内 容 , 那么 再 让 用 户 名 输入 框 纵 问 拓 中 就 没 意 义 了 , 我 们 在 设计 登录 界面 时 应 该 
改 为 遵守 从 上 住 下 依次 摆 放 各 控件 的 原则 。 

图 像 在 最 上 面 ， 首先 改 图 像 。 不 再 让 图 像 相对 于 用 户 名 输入 框 摆 放 位 置 ， 而 是 让 图 像 位 于 
父 控件 的 项 端 ， 所 以 把 图 像 控 件 的 属性 改 成 这 样 ， 如 图 3.5.2.3 所 示 。 


Properties 


id ImageView2 
layout width 100dp 
layout height 100dp 
* Layout Margin [2, ?, 2, 2, ?] 
layout margin 


layout marginBottom 
layout marginEnd 
layout marginLeft 
layout marginRight 
layout marginStart 
layout marginTop 
> Padding 
» Theme 
elevation 
background B «color/colorAccent 
layout alignParentTop 
layout centerHorizontal 


srcCompat (Qdrawable/female 


3.5.23 


注意 设置 了 layout alignParentTop， 使 得 图 像 控件 对 齐 到 了 父 控 件 的 顶端 。 用 户 名 输入 框 
应 相对 于 图 像 控 件 摆 放 ， 位 于 它 下 面 24dp， 所 以 其 属性 改 成 这 样 ， 如 图 3.5.2.4 所 示 。 


Properties 
id editTextName 
layout width 300dp 
layout height wrap content 
' Layout Margin [2, ?. 24dp. ?, ?] 
layout margin 
layout marginTop 24dp 
layout marginBottom 
layout marginEnd 
layout marginLeft 
layout marginRight 
layout marginStart 
» Padding 
» Theme 
elevation 
ems 10 
hint 请 输入 用 户 名 


» inputType [textPersonName] 
layout below @+id/imageView2 


layout centerHorizontal 


3.5.24 


注意 设置 了 layout below, Hj layout centerVertical， 密 码 框 和 按钮 的 相对 位 置 没 变 ， 
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不 用 动 。 现 在 页 面 看 起 来 是 图 3.52.5 所 示 这 样子 。 控 件 之 间 的 位 置 关系 终于 正常 了 。 此 时 运 
行 一 下 App, 旋转 到 横 屏 , 你 会 发 现 界面 可 以 被 上 下 拖 动 了 , 右边 还 出 现 了 滚动 条 , 如 图 3.5.2.6 


所 示 。 


AndFirstStep 


ut 4 


AndFirstStep 


3.52.5 3.52.6 


其 实 除了 使 用 ScrollView 外 ， 还 有 一 个 办 法 可 以 解决 横 屏 显示 不 全 的 问题 ， 那 就 是 不 支 
持 横 屏 ! 即 固定 Activity 的 方向 ， 这 只 需要 在 Manifest 文件 中 做 一 下 下 ， 如 图 3.5.2.7 所 示 。 


<?xml versionz"1.0" encoding-"utf-8"?» 
manifest xmlns:android-"http://schemas.android.com/apk/res/android" 
packagez"niuedu.com.andfirststep"» 
«application 
android:allowBackups"true" 
android:iconz"gmipmap/ic launcher" 
android:label-"(jstring/app name" 
android:roundIcon-"Qmipmap/ic launcher, round" 
android:supportsRtl-"true" 
android:themez"Qstyle/AppTheme"» 


«activity android:namez".Mainactivity" 


| android:screenOrientation-"portrait"» 


«intent-filter» 


«action android:name-"android.intent.action.MAIN" /> 
«category android:name-"android.intent.category.LAUNCHER" 
«/intent-filter» 
«/activity» 
c/application» 


图 3.5.2.7 


其 实 还 有 一 个 办 法 ， 就 是 专门 创建 横 屏 Layout, "nf 3.52.8 所 示 。 


68 


第 3 章 UI 资源 与 Layout 


[Fi z| | S. O Nexus 4 ~ N25 > (D AppTheme @Language ~ DJ. Properties 
© 4896 © Create Landscape Variation 


| Create layout-xlarge Variation 
*P 87:00 
AndFirstStep 


3.5.2.8 


选择 “Create Landscape Variation. (创建 风景 男 变 体 ) ”， 会 当前 Layout 添加 一 个 新 的 资 
源 文件 ， 当 屏幕 改 为 横 屏 时 ，App 会 上 自动 加 载 这 个 横 屏 的 Layout 资源 。 

Landscape 是 风景 画 的 意思 。 油 画 中 风景 画 都 是 宽 的 ， 用 来 代表 横 屏 。 竖 屏 是 portrait, H 
像 男 。 肖 像 画 都 是 长 的 ， 用 来 代表 竖 屏 。 

贴 一 下 产 公 吧 : 


<?xml version-"1.0" encoding="utf-8"?> 


Create Other... 


«ScrollView xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


«RelativeLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout gravity-"center vertical"» 


«ImageView 
android:id-"Q-cid/imageView2" 


android 


android: 
android: 


android 


android: 


:layout width-"100dp" 


layout height-"100dp" 
layout alignParentTop-"true" 


:layout centerHorizontal-"true" 
android: 


layout ma rginTop-"24 dp " 
background-"color/colorAccent" 


app:srcCompat-"8drawable/female" /» 


«EditText 


android 


android: 


android 


android 


:id-"Q-c-id/editTextName" 
android: 


layout width-"300dp" 
layout height-"wrap content" 


:layout below-"Q-id/imageView2" 
android: 


layout centerHorizontal-"true" 


:layout centerVertical-"false" 
android: 
android: 


layout ma rginTop- "2A dp " 
ems-"10" 
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android:hint=" 请 输入 用 户 名 " 


android:inputType-"textPersonName" /> 


<EditText 
android:id="@+id/editTextPassword" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout alignEnd-"G-*id/editTextName" 
android:layout alignLeft-"8Qcid/editTextName" 
android:layout alignRight-"8-*id/editTextName" 
android:layout alignStart-"8*id/editTextName" 
android:layout below-"Q-id/editTextName" 
android:layout marginTop-"24dp" 
android:ems-"10" 
android:hint=" 请 输入 密码 " 


android:inputType-"textPassword" /> 


«Button 
android:id-"Q8-*id/buttonLogin" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 


android:layout alignEnd-"Q8-«id/editTextPassword" 


android:layout alignLeft-"Q-id/editTextPassword" 
android:layout alignRight-"Q*id/editTextPassword" 
android:layout alignStart-"Q*id/editTextPassword" 
android:layout below-"Q-*id/editTextPassword" 
android:layout marginTop-"24dp" 
android:text-"X$3*" /> 


«Button 
android:id-"Q8-c-id/button2" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout alignEnd-"G8-*id/buttonLogin" 
android:layout alignLeft-"(-id/buttonLogin" 
android:layout alignRight-"8-*id/buttonLogin" 
android:layout alignStart-"8*id/buttonLogin" 
android:layout below-"QG-xid/buttonLogin" 
android:layout marginTop-"24dp" 
android:text-"jtA]" /> 


«/RelativeLayout» 
«/ScrollView» 


添加 新 的 Layout 资源 
添加 新 的 Layout 资源 ， 其 实 就 是 往 合 适 的 文件 夹 下 添加 一 个 XML 文件 ， 当 然 我 们 应 该 
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借助 Android Studio 提供 的 工具 而 尽量 不 要 手动 去 做 。 具 体 做 法 是 : 在 res/layout 组 上 点 出 右 
键 菜单 ， 如 图 3.6.1 所 示 。 


Ez app Palette e *r [HB Al S- 
p ciis © Widgets 
e 

java © Text Fields (EditText) 


Tower 户 Layouts 
> © drawable inm 


0 


v Filayous à ConstraintLayout 


— New Layout resource file 

€ ac z 
，， LinkC++ Project with Gradle B File 

f pack © Directory 

Œ value % Cut Ctrl+X — 

© Gradle Scri Dl Copy Ctrl+C - C++ Class 

Copy Path Ctri«Shift«c € C/C++ Source File 


Copy as Plain Text [ò C/C++ Header File 


图 3.6.1 


然后 选择 New Layout resource file， 出 现 新 建 资源 对 话 框 ， 如 图 3.6.2 所 示 。 


File name: frame test layout 


Root element: FrameLayout 


Source set: | main ia 


Directory name: | layout 
Available qualifiers: Chosen qualifiers: 


@ Network Code 

Ø Locale 

i Layout Direction 

E Smallest Screen Width E 
& Screen Width 

F] Screen Height 

5 Size 

E Ratio 

Œ Orientation 


m nana 4 


"o Ml 


图 3.6.2 


{E "File name” 项 中 输入 layout 文件 的 名 字 ， 将 来 也 是 这 个 资源 的 ID， 所 以 要 注意 其 规 
则 ， 不 能 以 数字 开头 ， 单 词 之 间 推 荐 用 下 划 线 分 隔 〈 非 必须 ， 但 最 好 遵守 ) 。 

“Root element” 项 中 输入 这 个 Layout 的 根 控件 ， 即 某 个 Layout 控件 。 在 这 里 我 们 使 用 
一 个 新 的 Layout: FrameLayout。 

“Source set” 有 三 个 选项 : main. release. debug. debug 指 的 是 市 有 调试 信息 的 App 版 
Æ. release 是 没有 调试 信息 的 App 版 本 。 这 里 指 的 是 分 别 包含 在 debug. release 版 中 的 代码 和 
资源 , 即 可 以 指定 某 些 文件 只 在 release 版 中 起 作用 , 有 些 只 在 debug 版 中 起 作用 。 而 属于 main 
的 文件 在 两 者 中 都 起 作用 。 这 里 一 般 就 选 main. 

"^ Directory name ”是 所 在 文件 夹 的 名 字 ， 这 个 不 要 变 了 ， 必 须 在 layout F- 

下 面 的 不 用 选 ， 点 OK 即 可 。 
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第 
各 种 Layout+ 控 件 


除了 我 们 讲 的 ConstraintLayout 和 RelativeLayout， 还 有 很 多 其 他 的 Layout 控件 ， 实 际 上 
这 两 个 是 最 复杂 的 ， 所 以 现在 再 学 其 他 的 Layout 就 感觉 到 很 简单 了 。 


FrameLayout 
FrameLayout 是 最 简单 的 一 种 Layout， 既 然 是 个 Layout， 它 当然 可 以 容纳 多 个 View。 但 
是 它 并 没有 一 定 的 规则 去 排列 多 个 View， 而 只 是 简单 的 把 它们 挫 登 在 一 起 ， 后 添加 的 会 盖 住 
先 添加 的 。 
上 一 节 我 们 添加 了 一 个 Layout 资源 (fragme test layout.xmD ， 其 根 控件 是 FrameLayout, 
我 们 直接 用 它 来 玩 一 下 吧 。 双 击 打开 文件 frame test layout.xml， 向 里 面 添 加 View， 你 会 发 现 
它们 都 扒 在 了 一 起 ， 如 图 4.1.1 所 示 。 


* & 6:00 
HelloWorld 


| ili ChéckBox 


Él 4.1.1 


FrameLayout 一 般 用 于 整个 页 面 只 有 一 个 子 控件 的 场景 或 用 于 实现 翻 页 效果 的 场景 。 


LinearLayout 


这 种 Layout 也 比较 简单 ， 它 里 面 的 子 控 件 是 依次 排列 的 ， 有 横 回 和 纵 同 之 分 。 请 像 上 一 
节 一 样 ， 创 建 一 个 新 的 layout 文件 ， 其 根 元 率 为 LinearLayout， 如 图 4.2.1 所 示 。 
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Eile name: linear layout test] 


Root element: | LinearLayout 


Source set main 
Directory name: |layout 


Available qualifiers: Chosen qualifiers: 
«€ Network Code 

Ə Locale 

区 Layout Direction 

区 Smallest Screen Width 

区 Screen Width 

Hi Screen Height 

M Size 

D Ratio 

m Orientation 


[em mam n c 


oxk | | Cancel | | Help 


4.2.1 


可 以 看 到 这 个 LinearLayout 是 一 个 纵 回 的 《vertical) ， 如 图 4.2.2 所 示 。 


palette m x*- 35- [H EH 78 O- ÜNexus4- 25- (apprheme Properties 
r3 Widgets EIE] E O2% E24 20 p 
jan] V -o 
— layout width | match parent 
ox Button - = 
= TogaleButton layout heig.. | match parent 
lx| CheckBox en LinearLayout 


(&RadioButton TA orientation vertical 
v CheckedTextView 


* Spinner 
= ProgressBar (Large) 
“= ProgressBar 
Component Tree 


畦 LinearLayout (vertical) 


4.2.2 


这 个 Layout 的 宽 和 高 都 是 “match parent”， 也 就 是 充满 了 整个 容器 的 空间 (这 里 是 预览 ， 
可 以 看 到 它 充 满 了 除 工 具 栏 之 外 的 整个 屏幕 的 ) 。 回 这 个 Layout 里 面 拖 入 一 些 View 玩 玩 吧 ， 


如 图 4.2.3 所 示 。 
PA 5:00 


BUTTON 


BUTTON 
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可 以 看 到 按钮 都 依次 纵 回 排列 。 


4.2.1 纵向 LinearLayout 中 子 控件 横向 居中 


现在 我 们 把 Button 的 layout width 改 为 wrap_content， 出 现 如 图 42.1.1 所 示 的 效果 。 但 
Button 全 部 靠 左 了 ， 强 迫 症 肯定 希望 这 些 按钮 都 大 中 ， 我 们 就 满足 他 们 吧 。 要 使 LinearLayout 
中 的 子 控件 横 加 居中， 有 两 种 方式 : 一 是 设置 LinearLayout 的 gravity 属性 ， 如 图 4.2.1.2 所 示 ; 
二 是 设置 子 控 件 本 身 的 属性 layout gravity (重心 ) ， 如 图 42.1.3 所 示 。 


ld 7:00 
AndFirstStep 


BUTTON 
BUTTON 
BUTTON 


gravity [center horizontal] 


top 


BUTTON 
bottom 

left 

right 

center vertical 
fill vertical 


center horizontal 
fill horizontal 
center 

fill 

clip vertical 

clip horizontal 
start 

end 


~” IDIODIOIO DOD 


图 4.2.1. 


layout gravity [center horizontal] 
top 
bottom 
left 
right 
center vertical 
fill vertical 
center horizontal 
fill horizontal 
center 
fill 
clip vertical 


clip horizontal 
start 
end 


图 4.2.1.3 


可 以 设置 控件 在 layout FEE, $E P. e Exe. RAINA E és I9] Jar P 
(center horizontal) 。 注 意 纵 回 居中 此 时 没 意 义 ， 选 了 也 不 起 作用 。 
Gravity 属性 表示 控件 的 内 容 的 重心 在 哪里 ， 即 内 容 在 控件 内 如 何 对 齐 ; layout gravity 表 
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示 控 件 在 父 控件 中 如 何 对 齐 ， 但 并 不 是 任何 类 型 的 父 控 件 都 支持 。 设 置 layout_gravity 的 话 可 
以 单独 控制 每 个 控件 在 其 父 控件 中 的 对 齐 方式 。 这 两 个 随便 选择 一 种 方式 吧 , 因为 所 有 控件 都 
后 中 ， 选 择 设 置 LinearLayout 的 gravity 更 省 事 。 设 置 后 ， 效 果 如 图 4.2.1.4 所 示 。 


P A700 
AndFirstStep 


BUTTON 
BUTTON 


BUTTON 


BUTTON 


4.2.2 子 控 件 均匀 分 布 


虽然 上 一 节 使 按钮 都 居中 了 , 但 是 对 要 强迫 症 来 说 还 不 能 满足 , 他 们 可 能 希望 这 些 按 钮 能 
在 纵 回 空间 上 均匀 分 布 。 此 时 依然 不 能 再 指望 LinearLayout 有 设置 子 控件 分 布 模式 的 属性 了 ， 
得 研究 子 控件 。 子 控件 有 个 叫 layout weight CHE) 的 属性 ， 用 于 设置 子 控件 在 LinearLayout 
中 在 纵 回 或 横 回 空间 上 所 占 的 比重 , 要 想 让 它 正 确 地 起 作用 , 需要 将 子 控件 的 layout width (在 
ie] LinearLayout 中 时 ) 或 layout height (EMI) LinearLayout 中 时 ) 设置 为 “0dp”! 要 均 
匀 分 布 ， 就 需要 为 各 子 控件 设置 相同 的 layout weight 值 ， 都 设 为 1 吧 ， 效 果 变 成 了 图 4.2.2.1 
所 示 的 样子 。 
includeFontPadding C) 
inputMethod 
inputType 0 


isScrollContainer [= 
keepScreenOn m 


AndFirstStep 


labelFor 
layerType 
layoutDirection 
layout weight 
letterSpacing 
lineSpacingExtra 


lineSpacingMultiplie:r 


lines 

linksClickable 
longClickable 
marqueeRepeatLimit 


4.22.1 
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4.2.3 子 控件 按 比例 分 布 


上 一 节 讲 到 了 比重 , 我 们 用 它 来 玩 一 下 非 均 匀 分 布 吧 , 我 们 把 第 一 个 按钮 的 layout weight 
设 为 1， 其 余 的 都 设 为 2， 看 看 有 什么 效果 〔( 见 图 4.2.3.1) : 所 有 按钮 按 比例 分 配 了 整个 纵 癌 
空间 ， 第 一 个 按钮 与 其 余 按钮 之 间 的 高 度 比 例 为 1:2， 如 果 你 不 想 让 子 控件 的 layout height 为 
0dp， 而 为 一 个 固定 的 值 或 为 wrap_content， 那 么 你 需要 把 它 的 layout weight 去 把 。 比 如 我 们 
想 让 第 一 个 Button 和 最 后 一 个 Button 的 高 度 都 为 固定 值 ， 其 余 的 都 按 比 例 充满 剩余 的 空间 ， 
效果 如 图 4.2.3.2 所 示 。 


P A700 
AndFirstStep 


BUTTON 


PA 700 
AndFirstStep 


MTTNN 


4.2.3.1 
现在 ， 整 个 linear layout test 文件 的 源码 如 下 : 


<?xml version-"1.0" encoding="utf-8" ?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center horizontal" 
android:orientation-"vertical"» 


«Button 
android:id="@+id/button" 


android:layout width-"wrap content" 
android:layout height-"30dp" 
android:text-"Button" /» 


«Button 
android:id-"Q8-c*id/button3" 
android:layout width-"wrap content" 
android:layout height-"0Odp" 
android:layout weight-"2" 
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android:text-"Button" /> 


<Button 
android:id="@+id/button4" 
android:layout width-"wrap content" 
android:layout height-"Odp" 
android:layout weight-"2" 


android:text-"Button" /> 


«Button 
android:id="@+id/button5" 
android:layout width-"wrap content" 
android:layout height-"30dp" 
android:text-"Button" /» 
«/LinearLayout» 


4.2.4 FB LinearLayout 实现 登录 表面 


观察 一 下 前 面 登 录 界 面 的 例子 ， 你 可 以 发 现 各 控件 都 是 纵 回 排列 的 ， 完 全 可 以 用 
LinearLayout 代 蔡 RelativeLayout 来 实现 。 但 如 果 一 个 界面 需要 多 个 LinearLayout 组 合 才能 
现 的 话 ， 我 们 就 应 该 用 RelativeLayout 或 ConstraintLayout 来 实现 ， 虽 然 RelativeLayout 或 
ConstraintLayout 看 起 来 比较 复杂 ， 但 对 于 复杂 的 排版 ， 它 们 的 处 理 速度 更 快 。 由 于 我 们 这 个 
登录 界面 不 是 很 复杂 的 界面 类 型 ,所 以 它 也 适合 用 LinearLayout 来 实现 ,下面 我 们 就 来 做 一 下 。 

我 们 再 创建 一 个 Layout 文件 ， 其 根 元 素 为 ScrollView EH ScrollView 是 为 了 适应 横 屏 
显示 不 了 整个 登录 内 容 的 情况 ) ， 如 图 4.2.4.1 所 示 。 


Eile name: | linear layout login | 


Root element: ScrollVie 
Source set: | main B 


Directory name: | layout | 


Available qualifiers: Chosen qualifiers: 
$3 Country Code 

© Network Code 

© Locale 

& Layout Direction | "- 

B Smallest Screen Width 

& Screen Width << | 

Hi Screen Height 


5 size 


ES Ratio 
E Orientation 


4.24.1 


A" OK", 创建 出 layout 文件 , 回 其 中 拖 入 一 个 纵 回 的 LinearLayout, 再 依次 同 LinearLayout 
中 拖 入 ImageView、Plain Text EditText、Password EditText、Bnutton。 拖 入 ImageView 时 选择 
要 显示 的 头像 为 Drawable 下 的 一 个 图 像 ， 我 选择 了 female; 修改 各 EditText 控件 的 hint， 把 
各 EditText 的 text 清空 ， 修 改 Button 的 text， 将 ImageView 的 宽 和 高 都 置 为 “100dp”， 把 各 


TT 


Android 9 编程 通俗 演义 


EditText 和 按钮 的 宽 都 改 为 “300dp”， 现 在 各 控件 的 id 倒是 不 重要 了 ， 因 为 它们 之 间 不 需要 
设置 相对 位 置 关系 。 现 在 看 起 来 界面 是 这 样 的 ， 如 图 42.42 所 示 。 


Ld ERU 
AndFirstStep 


清 输 入 用 户 名 


AIMATS 


4.2.4.2 


设置 LinearLayout 的 gravity, fi T 3 fF 4/1] f [8] j P (center horizontal) ， 于 是 
linear layout login.xml 的 代码 是 这 样 的 : 


<?xml version-"1.0" encoding="utf-8" ?> 

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" android:layout height-"match parent"» 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center horizontal" 
android:orientation-"vertical"» 


«ImageView 
android:id-"Q-*id/imageView3" 
android:layout width-"l00dp" 
android:layout height-"l00dp" 
app:srcCompat-"8drawable/female" /> 


«EditText 
android:id-"Q-«id/editText" 
android:layout width-"300dp" 


android:layout height-"wrap content" 


android:ems-z"10" 
android:hint=" 请 输入 用 户 名 " 


android:inputType-"textPersonName" /> 
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«EditText 
android:id-"Q-cid/editText2" 
android:layout width-"300dp" 
android:layout height-"wrap content" 


android:ems-"10" 
android:hint=" 请 输入 密码 " 


android:inputType-"textPassword" /> 


«Button 
android:id="@+id/button6" 
android:layout width-"300dp" 
android:layout height-"wrap content" 
android:text=" #3" /> 


</LinearLayout> 
</ScrollView> 


完成 ， 收 功 ! 


GridLayout 


Grid 是 网 格 的 意思 ， 就 是 把 显示 区 分 成 n 行 n 列 ， 每 列 的 宽度 都 一 样 ， 主 要 用 于 显示 表 
格式 的 排版 。 一 个 View 放 在 此 种 layout 中 ， 需 要 设置 View 的 layout row 和 layout column 
来 决定 View 处 于 第 几 行 第 几 列 。 图 4.3.1 是 一 个 示例 。 


MA ka 
AndFirstStep 


BUTTON RRK, REK, HRK 
BUTTON BUTTON 
BUTTON 


BUTTON 


4.3.1 
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这 个 控件 对 于 鼠标 拖 放 的 支持 不 是 很 好 ,所 以 子 控件 的 位 置 应 手动 去 编辑 。 子 控件 的 主要 
相关 属性 有 layout _ row 在 第 几 行 ， 从 0 开始 ) ~ layout column (在 第 几 列 ， 从 0 开始 ) 和 
layout columnSpan (2$JL7J) ~ layout rowSpan (路 几 行 ) 。 


TableLayout 


TableLayout 与 GridLayout 有 些 类 似 , 也 是 可 以 分 成 多 行 多 列 , 但 它 的 各 行 之 间 是 独立 的 ， 
每 一 行 的 列 数 可 以 不 同 ， 比 如 一 行 是 三 列 ， 而 另 一 行 是 五 列 。 此 Layout 的 每 一 行 是 一 个 单独 
的 Layout: TableRow， 所 以 要 添加 一 行 ， 需 要 先 添 加 一 个 TableRow， 然 后 回 这 一 行 中 添加 
View， 如 图 4.4.1 所 示 。 


P À 600 
HelloWorld 


O 这 是 一 个 很 长 很 长 很 长 “BUTTON 


BUTTON BUTTON BUTTON 


44.1 


其 实 这 个 效果 可 以 用 一 个 纵 回 的 LinearLayout MEAR [8] H'] LinearLayout 模拟 出 来 , 一 个 
横 回 的 LinearLayout 就 是 一 行 ， 但 其 执行 效率 不 如 TableLayout+TableRow 高 。 
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所 有 的 控件 都 是 从 类 View 派生 ,所 以 控件 也 被 叫 作 View。 各 种 Layout 控件 当然 也 是 View 
了 ， 但 由 于 其 作用 特殊 ， 所 以 我 们 单独 称 它 们 为 Layout (同时 我 们 有 时 也 把 一 个 UI 资源 文件 
称 做 layout 资源 ， 因 为 它 在 res/layout 组 下 ) 。 


在 Activity 中 创建 界面 


Activity 虽然 代表 一 个 页 面 ， 但 是 它 却 不 是 View， 然 而 它 却 能 管理 View 们 。 我 们 可 以 使 
用 代码 将 一 个 Activity 上 的 控件 们 创建 出 来 并 摆 放 好 来 构成 Activity WAM, (BERR, LA 
后 的 改动 也 非常 难 ， 所 以 通常 都 是 在 layout 资源 中 定义 Activity 的 界面 。App 在 显示 一 个 
Activity 前 ， 会 把 Layout 中 定义 界面 创建 出 来 ,设置 给 Activity， 之 后 再 把 Activity 显示 出 来 ， 
这 样 我 们 就 看 到 了 Activity 的 样子 ， 所 以 Activity 的 内 容 是 由 它 里 面 的 控件 们 组 合 出 来 的 。 

实际 上 从 layout 资源 创建 界面 并 设置 给 Activity 这 件 事 ，App 并 不 会 自动 做 ,需要 我 们 写 
代码 完成 ， 只 需要 调用 Acitivity 的 一 个 方法 setContentViewO 即 可 。 这 个 方法 需要 一 个 参数 ， 
就 是 layout 资源 文件 的 ia。 这 个 方法 需要 在 什么 时 机 调用 呢 ? 应 在 Activity 被 创建 之 后 ,但 还 
未 显示 出 来 之 前 调用 。 最 适合 的 地 方 就 是 Activity 的 onCreate0 方 法 。 打 开 你 的 MainActivity 
类 看 一 下 ， 是 不 是 有 onCreate0 方 法 ， 如 图 5.1.1 所 示 。 


^ XAA AA e 5 A Exapp-] P * 3$ 5 [à B 


-|© $+ X*-! | € MainActivityjava x | x activity main.xml x 


© manifests 
© java 
© niuedu.com.andfirstste| 


package niuedu.com.andfirststep; 


rag : uu import android.support.v7.app.AppCompatActivity; 
» sa Main ACANT Yan import android.os.Bundle; 
© niuedu.com.andfirstste| 


bb Examplelnstrume 
加 niuedu.com.andfirstste| 


@ & ExampleUnitTest 
res " : @Override 
protected void oncréate(Bundle savedInstancest 


© drawable 

[53 layout 
*» activity main.xml 
= grid layout test.xml| ^^ } 
w linear layout login.x -= } 


public class MainActivity extends AppcompatActivit 


super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 
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并 且 setContentView0 方 法 是 不 是 被 调用 了 ? 在 onCreate0 方 法 被 调用 之 后 经 过 不 长 的 时 
间 , Activity 束 被 显示 出 来 , 由 于 显示 之 前 已 把 控件 都 创建 并 加 载 了 ,所 以 我 们 就 看 到 了 Activity 
的 界面 。 当 然 这 些 代 码 Android Studio 已 帮 我 们 添加 了 ， 所 以 不 需要 我 们 手动 编写 了 ， 但 它们 
也 不 是 SDK 中 的 类 封装 好 的 ， 所 以 还 是 相当 于 我 们 手动 添加 的 。 


5.1.1 类 R 


setContentView0 的 实 参 是 R.layout.activity_ main， 它 是 一 个 整数 常量 ， 它 是 layout 型 资源 
文件 activity main.xml 的 id. R 是 一 个 类 , 是 Gradle 处 理 项 目 中 的 资源 文件 后 自动 产生 的 , 我 
们 不 能 改动 它 的 内 容 。 可 以 看 到 layout 资源 文件 的 id 名 与 文件 名 相同 ， 而 文件 的 扩展 名 被 忽 
略 。 既 然 文件 名 要 成 为 类 中 常量 的 名 字 ， 所 以 文件 名 当然 不 能 以 数字 开头 了 。 

资源 id 一 般 是 这 样 命名 的 : “R. 资 源 类 型 .id 名 ”， 比 如 引用 一 个 资源 中 定义 的 字符 串 ， 
如 果 其 id 7J* xxx ", 就 用 “R.string.xxx”; 8H — P FSDFr CF; id 1873" xxx"), si H1" R.drawable.xxx ”, 
而 引用 layout 资源 (比如 activity main.xmD 中 的 某 个 控件 时 《控件 id 也 为 “xxx”) , LH] 
“Ridxxx”。 总 之 ， 如 果 引 用 的 是 一 个 资源 文件 ，“R” 后 面 是 其 类 别 ; 如 果 是 资源 中 的 一 
个 元 素 〈 比 如 layout 资源 中 的 一 个 控件 ) ，“R” 后 面 是 “id”。 


5.1.2 Activity 的 父 类 


所 有 Activity 的 祖宗 是 类 Activity 。 但 我 们 看 到 MainActivity 类 的 父 类 是 
AppCompatActivity。AppCompatActivity 当然 也 是 从 Activity 类 派生 的 ， 它 对 旧版 本 Android 
系统 的 兼容 性 好 , 所 以 现在 推荐 此 类 为 我 们 定义 的 Activity 的 父 类 , 这 样 你 的 App 才 有 可 能 运 
行 在 比较 低 的 Android 系统 中 ， 也 就 是 有 更 多 的 手机 可 以 运行 你 的 Appo 


5.1.3 四 大 组 件 


Activity 被 称 作 Android 系统 中 的 四 大 组 件 之 一 。 这 四 大 组 件 分 别 是 Activity 
BroardcastReceiver (广播 接收 者 ) ~ Service (服务 ) 和 ContentProvider (内 容 提 供 者 ) 。 

这 四 大 组 件 后 面 都 会 介绍 , 现在 你 只 需要 记 住 ,四 大 组 件 有 个 明显 的 特征 : 就 是 不 能 通过 
new 直接 实例 化 ， 而 必须 由 Android 系统 创建 它们 。 但 前 提 是 能 让 系统 找到 这 四 大 组 件 的 类 定 
义 。 如 果 你 自 定 义 一 个 四 大 组 件 的 类 ， 必 须 在 你 的 App 的 Manifest (名 单 ) 文件 中 声明 它 ， 
这 样 系统 才能 找到 这 个 类 ， 才 能 实例 化 它 。 看 一 下 我 们 的 AndriodzManifest 文件 的 内 容 ， 如 图 
5.1.3.1 所 示 。 
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ainActivity.java x | x AndroidManifest.xml x 


<?xml version-"1.0" encoding-"utf-8'"?» 
«manifest xmlns:androidz"http://schemas.android.com/apk/res/android" 


package-"niuedu.com.andfirststep"» 
«application 
android:allowBackups "true" 
android:icon-"Qgmipmap/ic launcher" 
android:label-z"AndFirstStep" 
android:roundIcon-"(gmipmap/ic launcher round" 
android:supportsRtl-"true" 
android:themez"gstyle/AppTheme"» 
«activity android:name-z".MainActivity" 
android:screenOrientation-"portrait"» 
«intent-filter» 
«action android:name-z"android.intent.action.MAIN" /> 
«category android:name-" android.intent.category.LAUNCHER" /> 
«/intent-filter» 
«/activity» 
«/application» 


E 5.1.3.1 


被 红 框 框 起 来 的 就 是 我 们 App 中 当前 唯一 的 Activity 的 声明 。 属 性 “android:name” 的 值 
“.MainActivity” 是 Activity 的 类 名 ， 此 处 省 略 了 包 名 ， 但 是 前 面 的 “.” 不 能 省 。 其 实 有 了 这 
个 类 名 ， 系 统 就 可 以 通过 反射 的 方式 把 Activity 创建 出 来 了 。 至 于 “<intent-filter>” 元 素 的 作 
用 ， 后 面 会 讲 到 。 

如 果 你 只 创建 了 Activity 的 类 ， 而 没有 在 Manifest 文件 中 声明 它 ， 那 你 的 Activity 是 不 能 
局 动 的 。 


在 代码 中 操作 控件 


现在 运行 我 们 的 App 的 话 ， 看 到 的 将 是 登录 界面 ， 如 图 5.2.1 所 示 。 


= 
AndFirstStep 


5.2.1 
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我 们 正好 可 以 通过 登录 功能 来 演示 代码 如 何 操作 控件 。 比 如 要 验证 是 否 能 登录 , 我 们 必须 
获取 用 户 输入 的 用 户 名 和 密码 , 什么 时 候 获 取 呢 ? 登录 这 个 动作 是 在 用 户 点 了 登录 按钮 之 后 执 
行 的 ， 所 以 需要 啊 应 按钮 的 点 击 事件 ， 在 啊 应 事件 的 回调 方法 中 获取 用 户 名 和 密码 。 

无 论 怎样 ， 只 有 先 获取 控件 ， 才 能 操作 它 。 


5.2.1 获取 View 
还 记得 我 们 为 控件 指定 的 ID 吗 ? 如 图 5.2.1.1 所 示 。 


~ []Nexusa* 325 ~ Properties Q cse c 
© 29% © 4i ID editTextName 
100 Ee 300 40 layout width 300dp 


layout height wrap content 
EditText 

inputType textPersonName 
hint 请 输入 月 户 名 
style editTextStyle 
singleLine 回 
selectAllOnFocus [-] 

TextView 

text 

^ text 


contentDescript... 


> textAppearan... :terial.Medium.Inverse 
Favorite Attributes 


521.1 


在 代码 中 就 是 通过 这 个 ID 来 获得 控件 对 象 的 。 获 得 用 户 名 这 个 EditText 控件 的 代码 如 下 : 


下 面 我 们 就 可 以 用 editTextName 这 个 变量 来 操作 所 引用 的 控件 对 象 了 。 

获取 控件 用 的 是 Activity 的 fndViewById0 方 法 ， 其 参数 是 控件 的 ID。 它 的 返回 类 型 是 
View， 而 我 们 知道 这 里 实际 上 它 是 一 个 EditText 类 型 (到 底 是 什么 类 型 需要 去 界面 设计 器 中 
查看 ) ， 所 以 我 们 进行 了 强制 类 型 转换 (EditText 是 View 的 一 个 子 类 ) 。 

现在 得 到 了 这 个 控件 , 就 可 以 对 它 为 所 欲 为 了 ,比如 可 以 把 在 属性 编辑 器 中 设置 的 属性 改 
用 为 代码 来 设置 ， 这 样 也 让 我 们 体会 到 : 一 切 的 本 质 还 是 代码 。 

首先 让 我 们 在 属性 编辑 器 中 把 用 户 名 输入 控件 的 hint 属性 清空 (文件 是 activity_main.xml， 
别 搞 错 了 ) ， 这 样 就 看 不 到 提示 了 ， 如 图 5.2.1.2 所 示 。 
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[EH | | Q- [Nexus4- a25- Properties 
(1229€ O [4 4 EM ID editTextName 


100 200 300 :9 layout width 300dp 


layout height wrap content 
EditText 
inputType textPersonName 


AndFirstStep 


hint 


style editTextStyle 


singleLine [-) 
selectAllOnFocus [-] 


TextView 
text 


# text 


contentDescript... 


textAppearan... |:terial.Nedium.Inverse 
Favorite Attributes 


315 
然后 在 代码 中 这 样 写 : 


editTextName .setHint(" 请 输入 用 户 名 ") ; 


这 行 代码 应 该 放 在 什么 位 置 呢 ? 我 们 一 般 希 望 在 Activity 一 显示 出 来 就 能 看 到 
EditText dite 的 hint， 所 以 应 在 界面 显示 之 前 就 设置 ， 当 然 控 件 也 必须 已 被 创建 ， 所 以 应 放 
在 控件 创建 之 后 , 显示 之 前 ,最 合适 的 位 置 就 是 Activity 的 onCreate() 77 1X: "H HJ setContentView() 
这 一 句 之 后 。 现 在 Activity 的 onCreate 方法 是 这 样 的 ， 如 图 5.2.1.3 所 示 。 
public class MainActivity extends AppCompatActivity { 
(jOverride 
protected void onCreate(Bundle savedInstancestate) { 


super.onCreate(savedInstanceState); 


// ALayout IE JR X ff FURI 7E? E Activity. 


setContentView(R.layout.activity main); 


? android widget. EditText? Alt- Enter 


// Fdit£ 
ditrext — = (EditText) findViewById(R.id.editTextName); 


//BfCHREEBISZ 


editTextName sete MD RS "M 


图 5.2.1.3 


注意 ! 代码 中 有 标志 符 是 红色 的 ! 这 表示 找 不 到 这 个 标志 符 的 定义 。 类 名 、 方 法 名 、 变 量 
名 等 统称 标志 符 ， 这 个 错误 表示 “ 叫 作 EditText 的 类 或 方法 或 变量 没有 定义 ”。 根 据 Java 的 
命名 习惯 ,开头 字母 大 写 的 是 类 或 接口 ， 所 以 这 里 是 类 定义 找 不 到 。 其 原因 可 能 是 类 真 的 没有 
定义 ， 也 可 能 是 已 定义 了 而 没有 导入 。 这 里 就 是 没有 导入 造成 的 ， 解决 方法 是 Import 这 个 类 ， 
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你 不 用 去 查 这 个 类 所 在 的 包 ， 你 可 以 试 一 下 快捷 键 “Alt+Enter”， 看 看 它 能 不 能 帮 你 解决 错 

误 。 当 我 按 了 快捷 键 后 解决 问题 ， 可 以 看 到 导入 了 类 : “import android.widget.EditText;”。 
一 般 你 这 样 解除 源码 中 提示 的 错误 : 在 红色 文本 内 点 一 下 鼠标 ， 就 会 出 现 “Alt+Enter” 

的 提示 , 这 个 快捷 键 大 部 分 情况 下 都 能 帮 你 解决 问题 。 它 有 时 也 会 弹出 多 项 解决 方法 让 你 选择 ， 

那 你 就 要 看 仔细 了 ， 别 选 错 了 。 现 在 的 代码 是 这 样 的 : 

GOverride 


protected void onCreate(Bundle savedInstanceState) { 
super.onCreate (savedInstanceState); 


// A layout EUR X TETIIETETEI IE EAT Activity. 
setContentView(R.layout.activity main); 


f 


/ / IH id ZCSI/i IHA fe ff 

EditText editTextName - (EditText) findViewById(R.id.editTextName); 
/ / AIAZ E E TEN 

editTextName.setHint ("请 输入 用 户 名 "); 


运行 之 ， 结 果 如 图 5.2.1.4 所 示 。 


m 
AndFirstStep 


5.2.14 


可 以 看 到 ， 在 实际 运行 中 ,用 户 名 输入 控件 中 依然 有 提示 ， 说 明代 码 起 作用 了 ! 在 代码 中 
设置 提示 的 方法 是 setHint0， 它 符合 Java 中 Getter 和 Setter 的 命名 规则 ，setHint 对 应 的 属性 
名 就 是 “hint”， 所 以 在 界面 设计 器 中 就 是 设置 “hint” 属 性 。 


5.2.2 ”响应 View 的 事件 
App 提供 了 图 形 界面 ， 人 通过 界面 中 的 控件 与 App 交互 。 比 如 在 我 们 的 登录 页 面 中 ， 通 


86 


第 5 章 代码 操作 控件 


过 点 击 登录 按钮 登录 , 所 以 登录 代码 是 在 点 击 登 录 按 钮 之 后 执行 , 所 以 我 们 需要 啊 应 按钮 的 点 
击 事件 。 如 何 啊 应 呢 ? 添加 侦 听 器 ! 

侦 听 器 是 一 个 接口 ,我 们 要 实现 这 个 接口 ， 才 能 创建 侦 听 器 实例 ， 然 后 要 啊 应 哪个 控件 的 
事件 ， 就 把 侦 听 器 实例 设置 给 哪个 控件 。 注意 不 同 的 事件 对 应 的 侦 听 器 接口 不 一 样 ， 比 如 啊 应 
点 击 事件 的 侦 听 器 接口 是 View.OnClickListener ， 而 啊 应 滚动 的 侦 听 器 接口 叫 
AbsListView.OnScrollListener. 

啊 应 点 击 登录 按钮 的 代码 如 下 : 


/ / BYGE RIZ 
Button buttonLogin = (Button) findViewById (R.id.buttonLogin); 
// SAU Ur, MIZAH click Af 


buttonLogin.setOnClickListener (new View.OnClickListener() { 


QOverride 
public void onClick(View v) { 
/ / AX 78 IE] 5 WIL ETE IC 

} 
)); 

注意 这 里 使 用 了 匿名 类 语法 。 我 们 从 View.OnClickListener 派生 了 一 个 类 并 实现 了 它 的 方 
法 onClick0， 但 是 我 们 没有 为 这 个 类 定义 名 字 。 可 以 看 到 这 个 匿名 类 的 语法 其 实 是 把 从 父 类 
派生 和 new 这 个 派生 类 实例 的 代码 结合 在 一 起 了 。 一 般 啊 应 各 控件 事件 代码 都 不 一 样 ， 所 以 
从 侦 听 器 接口 派生 的 类 一 般 不 会 被 重用 ， 上 所 以 用 匿名 类 写 起 来 束 省 事 了 。 

现在 虽然 啊 应 了 按钮 的 点 击 事件 ， 定 义 了 回调 方法 ， 但 方法 onClick0 中 什么 也 没 做 ， 我 
们 做 点 事情 以 看 到 效果 ， 来 个 简单 的 例子 提示 一 下 吧 。 


5.2.3. 添加 依赖 库 


显示 提示 有 多 种 方式 ， 最 新 的 方式 是 用 类 Snackbar， 但 是 要 使 用 这 个 类 ， 需 要 添加 依赖 库 
“design”， 否 则 的 话 这 个 类 束 不 能 被 导入 。 
项 目 所 依赖 的 库 在 Gradle 的 一 个 脚本 文件 中 定义 ， 如 图 5.2.3.1 所 示 。 


v B app 
» © manifests 
» D java 
» Pares 
- 1$ Gradle Scripts 
(8 build.gradle (Project: AndFirstStep) 
(€ build.gradle (Module: app 
(si gradle-wrapper.properties (Grade l 
[E] proguard-rules.pro (ProGuard Rules 1 < 
[3 gradle.properties (Project Properties)| 15 
(® settings.gradle (Project Settings; 
[s local. properties (SDK Location) 


:$ qProject 


o 
— 
= 
— 
o 
= 
5 
n 
N 


($- Captures 


5231 


在 此 文件 中 的 dependencies 块 列 出 了 App 依赖 的 库 ， 如 图 5.2.3.2 所 示 。 
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dependencies ( 
implementation fileTree(dir: 'libs', include: ['*.jar']) 
implementation 'com.android.support:appcompat-v7:27.1.1' 


implementation 'com.android.support.constraint:constraint-layout:1.1.3' 


testImplementation 'junit:junit:4.12' 
androidTestImplementation 'com.android.support.test:runner:1.0.2" 
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' 


A133 
这 都 是 Gradle 的 语法 。 稍 微 解释 一 下 。 
€ implementation fileTree(include: ['*.jar'], dir: "libs") : 


这 一 句 定 义 了 默认 库 文件 夹 为 “libs”, 也 就 是 把 jar 包 扔 到 工程 的 libs LR FARR Fl 
动 找 到 ， 如 果 工 程 根 路 径 下 没有 libs 目录 ， 那 就 自己 建立 一 个 员 , 但 一 般 我 们 不 这 样 做 ， 有 更 
方便 的 做 法 。 


€ implementation 'com.android.support:appcompat-v7:27.-': 


这 一 句 定义 了 一 个 库 , 以 “:” 分 成 了 三 部 分 ,“com.android.support” 是 这 个 库 的 groupid, 
“appcompat-v7” 是 库 名 ，“27.+” 是 版 本 。 注 意 你 的 项 目 中 此 版 本 号 可 能 不 一 样 ， 肯 定 要 比 
我 的 版 本 高 了 。 
testImplementation 和 androidTestImplementation 表示 在 单元 测试 代码 中 所 用 到 的 库 。 
我 们 要 添加 design 库 ， 这 样 写 : 


放 在 这 个 代码 块 内 就 行 ， 顺 序 无 所 谓 。 注 意 版 本 必须 与 已 存在 的 同属 于 
“com.android.support” 组 的 库 的 版 本 一 致 才 行 ， 否 则 编译 通 不 过 。 

还 可 以 通过 模块 设置 对 话 框 添加 依赖 库 ， 方 法 是 : 

(OD 在 模块 名 上 点 右键 ， 弹 出 菜单 ， 如 图 5.2.3.3 所 示 。 


BB activity mainxml x © Ma 


Ld 


N 
build.gradle Link C++ Project with Gradle 


(€ build.gradle 9* Cut Ctrl «X 
[à gradle-wrapi Ch Copy Ctrl «C 
E) proguard-rul Copy Path Ctrl « Shift C 
[3i gradle.prope Copy as Plain Text 
(€ settings.grad cii Paste Ctrl+V 
[à 1ocal.propert Find in Path... Ctrl «Shift F 
Replace in Path... Ctrl Shift-R 
Analyze 
Refactor 
Add to Favorites 
Show Image Thumbnails Ctrl -Shift- T 
Reformat Code Ctrl -Alt-L 
Optimize Imports Ctrl- Alt- O 
Local History 
Git 
Q9 Synchronize 'app' 
Show in Explorer 


File Path Ctri-Alt-F12 


&à Compare With... Ctrl «D 


Open Module Settings 
& Create Gist.. 


52.33 
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(2) 选择 菜单 项 “Open Module Settings( 打 开 模 块 设置 )”， 出 现 模 块 设置 窗口 ， 如 图 
5.2.3.4 所 示 。 


f Project Structure 
| 

十 一 Properties Signing | Flavors | Build Types Dependencies | 
| SDK Location | scope 十 
| Project (include=[*.jar], dir=libs} Compile - 
, Developer Se...  androidTestCompile('com.android.support.test.espresso;espresso-cc t 
| Ads o m com.android.support:appcompat-v7:25.3.1 Compile v 4 
| meon m com.android.support.constraint:constraint-layout:1.0.2 Compile d 

nm— m junitjunit4.12 Test compile + 

Modules : A WP ED : , 
m com.android.support:design:25.3.1 Compile M 


app 


Cancel | 


图 5.2.3.4 


(3) 在 “Dependencies (依赖 ) ”页 面 中 添加 依赖 项 。 点 右上 和 角 的 绿色 “+” 图 标 ， 出 现 
菜单 ， 如 图 5.2.3.5 所 示 。 


Compile 


1 Library dependency 
3h 2 Jar dependency 
:25.3.1 Compile C33 Module dependency 
traint-layout:1.0.2 Compile 

Test compile ~ 


bort.test.espresso:espresso-cc 


Compile v 


图 5.2.3.5 


(4) 选择 “Library dependency〔 库 依赖 ) ”， 出 现 如 图 5.2.3.6 所 示 的 窗口 。 


com.android.support:design:27.1.1 | Q i: 
Enter terms for Maven Central search, or fully-qualified coordinates (e.g. com.goog/le.code.gson:gson:Z.2.4) 
com.android.support:design (com.android.support:design:27.1.1) 
org.webjars.bowergithub.predixdesignsystem:px-buttons-design (org.webjars.bowergithub.predixdesignsyst... 
org.webjars.bowergithub.predixdesignsystem:px-actionable-design (org.webjars.bowergithub.predixdesigns... 
org.webjars.bowergithub.predixdesignsystem:px-list-ui-design (org.webjars.bowergithub.predixdesignsyste... 


org.webjars.bowergithub.predixdesignsystem:px-tables-design (org.webjars.bowergithub.predixdesignsyste... 
org.webjars.bowergithub.predixdesignsystem:px-forms-design (org.webjars.bowergithub.predixdesignsyste... 
com.automationrockstars:design (com.automationrockstars:design:1.0.5) 

org.webjars.bowergithub.predixdesignsystem:px-spacing-design (org.webjars.bowergithub.predixdesignsyst... 


mom 


5.2.3.6 


(5) X&f€ "com.android.support:design" 3X —2&, = “OK” , Gradle 就 会 自动 添加 这 个 
库 。 注 意 版 本 号 ， 有 时 会 与 已 存在 的 support 库 的 其 他 包 版 本 不 一 致 ， 那 就 手动 改 一 下 。 
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注意 一 个 库 要 能 被 Android Studio 正确 使 用 ， 需 要 经 过 一 定 的 处 理 ， 所 以 你 可 以 看 一 下 在 
Android Studio 下 面 的 状态 栏 的 右边 是 否 正 在 显示 进度 条 ， 如 果 有 ， 就 需要 等 一 会 ， 直 到 进度 
条 消失 才能 继续 下 一 步 的 工作 ， 如 图 5.2.3.7 所 示 。 


E 
ra 
* 


**TODO -F & Android Monitor El Terminal — "A 9; Version Control 
[3 Gradl.. (moments ago) ~ Gradle: Build (ESSSEEFEERAOÓ 


图 5.2.3.7 


5.24 显示 提示 
下 面 就 可 以 使 用 Snackbar 显示 提示 信息 了 ， 在 onClick 方法 中 加 入 如 下 代码 : 


QOverride 


public void onClick(View v) { 
//fl/£& Snackbar X/ R 
Snackbar snackbar = Snackbar.make(v, "RART?" , Snackbar .LENGTH LONG); 
/ / EIDE 
snackbar.show(); 


解释 一 下 : 第 一 行 是 创建 一 个 Snackbar 对 象 ， 第 二 行 是 显示 这 个 提示 。 

创建 对 象 调 用 了 Snackbar 类 的 静态 方法 make。 这 个 方法 需要 三 个 参数 。 第 一 个 是 一 个 
View, Snackbar 根据 它 获 取 一 个 合适 的 父 控 件 来 放置 自己 , 我 们 传 入 了 onClickO 的 参数 “v” 
这 个 “v” 是 什么 呢 ?” 它 就 是 被 点 击 那 个 控件 。 第 二 个 参数 是 要 提示 的 文本 。 第 三 个 是 一 个 常 
E, 表示 文本 多 长 时 间 后 提示 自动 消失 ,这 个 时 间 有 三 个 值 可 选 , 这 三 个 值 是 定义 在 Snackbar 
类 中 的 常量 。 

想 看 Snackbar 类 的 定义 ， 请 按 下 Ctrl 键 ， 然 后 在 Snackbar 类 名 出 现 的 地 方 点 下 一 鼠标 左 
键 ， 如 图 5.2.4.1 所 示 。 


public void onClick(View v) 1 
// éj&snackbar Xj £& 

Snackbar urn MEM = Snackbar.make(v , "RAR T'E?" ,Snackbar.LENGTH, LONG) ; 

I BIRRE 


snackbar .show(); 


5.2.4.1 


于 是 打开 了 Snackbar 的 源 文 件 ， 如 图 5.2.42 所 示 。 
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public final class þnackbar extends BaseTransientBottomBar«Snackbar» { 


* Show the Snackbar indefinitely. This means that the Snackbar will be displayed frol 


* that is {@Link #show() shown} until either dismissed, or another Snackbar is 


* see ?setDuration 


public static final int LENGTH INDEFINITE = BaselransientBottomBar.LENGTH INDEFINITE; 


show the Snackbar for a short period of time. 
* gsee ZsetDuration 


public static final int LENGTH SHORT - BaseTransientBottomBar.LENGTH SHORT; 


he Snachbar for a Long period of time. 
* gsee ssetDuration 


public static final int LENGTH LONG - BaseTransientBottomBar.LENGTH LONG; 


图 5.242 


你 看 了 这 三 个 表示 时 间 的 常量 了 吧 ?“LENGTH INDEFINITE ”表示 永 不 自动 关闭 提示 ; 
“LENGTH SHORT ”表示 短 时 间 内 就 关闭 提示 : “LENGTH LONG” 表 示 比 较 长 的 时 间 之 
后 才 关 闭 提示 。 这 个 时 间 的 长 短 到 底 是 多 和 久 呢 ? 目 己 体会 一 下 吧 ， 只 可 意 会 不 可 言传 。 

现在 运行 起 App， 然 后 点 “登录 ”按钮 ， 出 现 如 图 5.2.4.3 所 示 的 效果 。 


MARFII? 


< 


5.2.4.3 
现在 整个 Activity 类 的 代码 是 这 样 的 : 


public class MainActivity extends AppCompatActivity í 


QOverride 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 


rad 


F 3. NANI" MAT ME " fr 7 MAT PI d 72 A "71 Eg LA 7 * 
d i M 1 ay out 5 UR X. 你 "n WI 5I jT IF IF Ex EI ZH AC E \ 


setContentView(R.layout.activity main); 


// fl id FEB T A fef 
EditText editTextName - (EditText) findViewById(R.id.editTextName); 
// IM CER IE BE E HIEN 
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editTextName .setHint ("请 输入 用 户 名 "); 


/ / BRYER fi el 
Button buttonLogin = (Button) findViewById(R.id.buttonLogin); 
// RR, MAHAKI click AI 
buttonLogin.setOnClickListener(new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
//fl/& Snackbar HR 
Snackbar snackbar = Snackbar .make (v, "我 是 登录 按钮 ， 你 点 我 干 哈 ?"， 
Snackbar .LENGTH LONG); 
/ / IPE 


snackbar.show(); 
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第 
Activity 导 航 


Activity 导航 就 是 页 面 之 间 的 切换 。 

我 们 现在 有 了 一 个 登录 页 面 ， 在 这 个 页 面 上 有 “注册 ”按钮 。 一 般 的 设计 是 点 “注册 ” 按 
钮 进入 注册 页 面 , 用户 在 注册 页 面 注册 成 功 后 , 返回 登录 页 面 进 行 登录 ， 此 时 会 把 刚 注册 的 用 
户 名 和 密码 填 到 相应 的 输入 框 中 。 下 面 我 们 就 把 这 个 典型 的 过 程 实现 一 下 , 同时 演示 如 何 实现 
页 面 导航 。 


创建 注册 页 面 


要 创建 注册 页 面 ， 需 要 添加 一 个 Activity， 过 程 如 下 : 
首先 ， 在 app 上 点 右键 ， 弹 出 菜单 ， 选 择 new 一 Activity 一 Basic Activity, WB] 6.1.1 所 示 。 


-© $-l- © MainActivityjava x | = activity main.xml x 
(€ Java Class EE O- DNou:2- 
Link C++ Project with Gradle L3 Module 
3 Android resource file 
I3 Android resource directory 
目 File 


[3 Package 


Copy Path Ctrl- Shift-C 
Copy as Plain Text 
r$ Paste ctrI+V 19 C++ Class 
€ C/C++ Source File 
m C/C++ Header File 


AndFirstStep 


Find in Path... Ctrl * Shift F 
Replace in Path... Ctrl «* Shift R 


Analyze , 'Ẹ' Image Asset 


Refactor , Wi Vector Asset 
Add to Favorites , 
Show Image Thumbnails — Ctri«shift«r Edit File Templates... 
Reformat Code Ctri+Alt+ V AIDL 

Optimize Imports 


3| Singleton 


; «8$ Android Auto 
iĝ! Folder Jic 
$$ Fragment m Basic Activity 
i Google R 
« Other = Bottom Navigation Acti 


Local History 
(5 Synchronize 'app' 

Show in Explorer 

Directory Path Ctrl-Alt-F12 
Éi Compare With... Cti*D à, cervice m Empty Activity 
Open Module Settings F4 ($4 UI Component = Fullscreen Activity 


6.1.1 


在 创建 App 时 ， 我 们 也 创建 了 一 个 Activity， 当 时 选择 的 模板 是 “Empty Activity" , XR 
我 们 选择 “Basic Activity” 玩 玩 。Android Studio 会 创建 以 下 文件 : 
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€ java 组 下 的 RegisterActivity 类 文件 ; 
€  Res/layout 组 下 的 activity register.xml 和 content register.xml 文件 。 


还 在 Manifest 文件 中 增加 了 RegisterActivity 的 声明 : 


<activity 


android:namez".RegisterActivity" 
android:label-"RegisterActivity" 
android:theme-"Qstyle/AppTheme.NoActionBar"»«/act ivity;| 


此 时 虽然 创建 了 注册 Activity, 但 是 运行 时 并 不 能 看 到 它 , 因为 我 们 需要 写 代 码 将 它 司 动 。 


include layout 资源 文件 


由 于 我 们 这 次 选择 的 Activity 模版 是 Basic Activity， 所 以 你 会 发 现 一 个 Activity 对 应 两 个 
layout 文件 ， 如 图 6.1.1.1 所 示 。 


®© layout 
i$ activity main.xml 
®© activity register.xml 
** content register.xml 
加 grid layout test.xml 
** linear layout login.xml 


** linear layout test.xml 


6.1.1.1 


而 它们 之 间 是 include 2&4, activity register.xml 中 包含 了 content register.xml, AYIB 
activity register.xml 中 有 这 么 一 句 : «include layout-"(2layout/content register" />。 其 实 它们 最 
终 还 是 形成 一 个 文件 ， 只 是 通过 include 的 方式 把 内 容 分 散 到 不 同 的 文件 中 ， 以 易于 维护 。 

activity registerxml 是 总 文件 ， 定 义 了 内 容 之 外 的 组 件 ， 比 如 AppBar 和 
FloatingActionButton (浮动 动作 按钮 ) ，content register.xml 定义 了 内 容 。 

注意 ! 但 是 你 要 编辑 内 容 的 话 ， 必 须 打 开 content register.xml 而 不 是 activity register.xml. 


局 动 注 册页 面 


新 的 页 面 已 创建 ， 把 它 显 示 出 来 看 看 吧 。 要 显示 它 ， 就 得 启动 这 个 Activity， 要 启动 新 的 
Activity， 需 要 调用 当前 Activity 的 方法 startActivityO0。 此 方法 需要 一 个 参数 Intent，Intent 中 
指明 要 启动 哪个 Activity。 启 动 新 RegisterActivity 的 代码 放 在 哪里 呢 ? 我 们 应 该 在 点 击 注册 按 
钮 时 才 局 动 注册 界面 ， 所 以 应 该 放 在 啊 应 注册 按钮 点 击 事件 的 方法 中 ， 代 码 如 下 : 


// TCEREMTREI, IgE 
Button buttonRegister = (Button) findViewById(R.id.buttonRegister); 


buttonRegister.setOnClickListener (new View.OnClickListener() { 
QOverride 
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public void onClick(View v) { 
// SELZER DITET WHILE 
//f8/ Intent, JEJE EIZ/EJ Activity 
Intent intent - new Intent(MainActivity.this,RegisterActivity.class); 


// HE] Activity 
startActivity (intent); 


这 段 代 码 应 放 在 MainActivity 类 的 onCreate0 方 法 中 。 

注意 Activity 不 允许 直接 用 new 创建 实例 ， 只 能 请 求 系统 帮 有 我 们 创建 。 在 Intent 的 构造 方 
法 中 通过 在 第 二 个 参数 传 入 Activity 的 类 对 象 (RegisterActivity.class) 从 而 指明 了 要 启动 哪个 
Activity. Intent 构造 方法 的 第 一 个 参数 是 一 个 Context 对 象 ，Activity 就 是 从 Context JK^E, Br 
以 此 处 传 入 了 当前 Activity 的 实例 ， 因 为 onClick0 方 法 属于 内 部 类 (从 接口 
View.OnClickListener 派生 的 匿名 内 部 类 ) ， 所 以 要 使 用 外 部 类 的 实例 ， 必 须 在 this 前 加 上 外 
部 类 的 类 名 CMainActivity.this) 。 

运行 起 来 ， 点 注册 按钮 ， 是 不 是 注册 界面 出 现 了 “如 图 6.2.1 所 示 ) ? 如 何 回 到 上 一 页 面 
呢 ? 点 返回 键 啊 ， 红 和 区 头 指 的 束 是 。 


RegisterActivity 


修改 页 面 标题 


不 论 是 MainActivity 还 是 RegisterActivity， 其 AppBar 上 的 标题 都 不 够 人 性 化 ， 比 如 
RegisterActivity 的 标题 是 “RegisterActivity”， 我 们 改 一 下 吧 。 这 些 字 符 串 都 放 在 资源 文件 
Tes/values/strings.xml 中 ， 但 我 们 直接 去 这 个 文件 中 找 是 比较 有 厅 烦 的 ， 因 为 我 们 不 能 确定 哪个 
String 资源 被 谁 使 用 ， 所 以 我 们 应 该 顺 膝 摸 瓜 ， 先 看 Activity 的 标题 使 用 的 是 哪个 String 资源 。 
打开 Manifest 文件 ， 如 图 6.2.1.1 所 示 。 
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«application 


android:allowBackup-"true" 
android:iconsz "(jmipmap/ic launcher" 
android:roundIcon-"gmipmap/ic launcher, round" 
android:supportsRtls"true" 
android:theme-"Qstyle/AppTheme"» 
«activity 

android:namez".MainActivity" 

android:screenorientation-"portrait"» 

«intent-filter» 

«action android:names"android.intent.action.MAIN" /> 


«category android:namez"android.intent.category.LAUNCHER" /> 
«/intent-filter» 
«/activity» 
«activity 
android:namez" 


android:theme-"gs 


«/application» 


6.2.2 


可 以 看 到 activity 元 素 的 属性 “android:label”, 就 是 它 指定 了 Activity 的 标题 ，Application 
也 有 这 个 属性 ， 它 指定 的 是 App 的 名 字 ， 即 显示 在 果 面 上 的 App 名 字 ， 如 图 6.2.3 所 示 。 


"TET, 


AndFirstSt.. APH)emos Calculator Calendar Camera 


eCoaor-xz 


Chrome Clock Contacts Custom Lo. Dev Tools 


OQ...» 


Downloads Email Gallery Gestures B.. Google 


QOO s 


Maps Messenger Music Phone Settings 


图 6.2.3 


按 着 Ctrl 键 ， 在 activity 的 android:label 属性 的 值 上 点 一 下 鼠标 左 键 ， 束 会 打开 string.xml 


文件 ， 并 显示 字符 串 资源 “title activity register”， 如 图 6.2.4 所 示 。 
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9 AndroidManifest.xml * 加 strings.xml x 


Edit translations for all locales in the translations editor. 


resources string 
«resources» 
«string name-"app name"»AndFirstStep«/string» 


© «string name-"title activity register"»RegisterActivity«/string» | 


«/resources» 


图 6.2.4 


我 把 此 字符 串 资源 的 值 改 为 “注册 ”。 
我 们 还 要 把 MainActivity 的 标题 改 为 “登录 ”， 但 是 MainAcitivity 的 声明 中 没有 
“android:label” 这 个 属性 ， 没 关系 ， 添 加 一 个 即 可 ， 如 图 6.2.5 Br. 


«activity 
bress Alt+Enter android:namez".MainActivity" 
Y^| android:labelsz"gstring/title activity login" 
android:screenOrientationz"portrait"» 
«intent-filter» 
«action android:name-"android.intent.action.MAIN" /> 


«category android:name-"android.intent.category.LAUNCHER" /> 
«/intent-filter» 
«/activity» 
«activity 
android:namez".RegisterActivity" 
android:label-"Gstring/title activity register" 
android:theme-"Qstyle/AppTheme.NoActionBar"»«/activity» 


图 6.2.5 


我 为 它 的 android:label 属性 设置 字符 串 资 源 title activity login, 但 是 这 里 显示 红色 ， 因 为 
这 个 字符 串 资源 并 没有 定义 , 我 们 可 以 手动 去 string.xml 中 添加 它 ， 也 可 以 借助 IDE 帮 我 们 创 
建 。 借 助 IDE 的 方式 是 : 点 左边 的 红色 灯泡 ， 也 可 以 把 光标 放 到 红色 字符 之 间 ， 然 后 按 下 
Alt-Enter 键 ， 此 时 出 现 菜 单 ， 让 我 们 选择 如 何 解 决 此 问题 ， 如 图 6.2.6 所 示 。 


<activity 
android:name=" .MainActivity" 
android:labelz"Qstring/title activity login" 


* Create string value resource 'title activity login' — » [ag 


?» Inject language or reference 


: ntent.action.MAIN" /» 


«category android:name-"android.intent.category.LAUNCHER" /> 
«/intent-filter» 
«/activity» 


图 6.2.6 


选 第 一 个 菜单 项 “Create stirng value resource'title activity login'( 创 建 String 值 资源 )”, 出 
现 资源 创建 对 话 框 (图 6.2.7) 。 在 Resource value 中 输入 “登录 ” 即 可 ， 其 余 不 用 动 ， 点 OK 
按钮 。 可 以 看 到 红色 提示 消失 ， 字 符 串 资源 被 创建 。 你 可 以 去 string.xml 文件 中 查看 是 否 多 了 
新 的 字符 串 资 源 tile activity login。 现 在 登录 页 面 的 标题 如 图 6.2.8 所 示 。 
注册 页 面 的 标题 如 图 6.2.9 所 示 。 
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e 


Resource value: 登录 
Source set: main | 


File name: strings.xml M 
Create the resource in directories: 
values 


6.2.7 6.2.8 6.2.9 


* * * 
设计 注册 页 面 
注册 页 面 一 片 光秃秃 ， 我 们 搞 一 些 控件 ， 设 计 一 个 注册 页 面 吧 。 用 户 注册 时 ， 可 以 输入 : 
用 户 名 、 密 码 、Email、 电 话 、 性 别 、 住 址 。 设 计 界 面 如 图 6.3.1 所 示 ， 控 件 树 结构 如 图 6.3.2 
所 示 。 
Component Tree 
! ScrollView 
^4 ConstraintLayout 
abc editTextName 
abc editTextPassword 
ac editTextPassword2 
c editTextEmail 
abc editTextPhone 
:= radioGroup (horizonta 
ac editTextAddress 


ok buttonOk 
ok buttonCancel - 


Design Text 


6.3.1 6.3.2 


layout 源码 (content register.xml) 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 
«ScrollView xmlns:android-"http://schemas.android.com/apk/res/android" 


xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
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android:layout width=" match parent" 

android:layout height-"match parent" 

app:layout behavior-"8string/appbar scrolling view behavior" 
tools:context-"niuedu.com.andfirststep.RegisterActivity" 
tools:showIn-"8layout/activity register"» 


«android.support.constraint.ConstraintLayout 
android:layout width-"match parent" 
android:layout height-"wrap content"» 


«EditText 
android:id-"Q-cid/editTextName" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginLeft-"8dp" 
android:layout marginRight-"8dp" 
android:layout marginTop-"l6dp" 
android:ems-"10" 
android:hint-"fjP 4" 
android:inputType-"textPersonName" 
app:layout constraintHorizontal bias-"0.0" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 


«EditText 
android:id-"Q8-c-id/editTextPassword" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginLeft-"8dp" 
android:layout marginRight-"8dp" 
android:layout marginTop-"8dp" 
android:ems-"10" 
android:hint=" 密 码 " 
android:inputType-"textPassword" 
app:layout constraintHorizontal bias-"0.0" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomOf-"G8-*id/editTextName" /> 


«EditText 
android:id-"Q-c-id/editTextPassword2" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginLeft-"8dp" 
android:layout marginRight-"8dp" 
android:layout marginTop-"8dp" 
android:ems-"10" 
android:hint=" 再 次 输入 密码 " 


android:inputType-"textPassword" 
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app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomOf-"G8-*id/editTextPassword" /> 


«EditText 
android:id-"Q-c*id/editTextEmail" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginLeft-"8dp" 
android:layout marginRight-"8dp" 
android:layout marginTop-"8dp" 
android:ems-"10" 
android:hint-"Email" 
android:inputType-"textEmailAddress" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomOf-"Q8-*id/editTextPassword2" /> 


«EditText 
android:id-"Q8-cid/editTextPhone" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginLeft-"8dp" 
android:layout marginRight-"8dp" 
android:layout marginTop-"8dp" 
android:ems-"10" 
android:hint-"Hiii" 
android:inputType-"phone" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomOf-"G8-*id/editTextEmail" /> 


«RadioGroup 
android:id-"Q-cid/radioGroup" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginLeft-"8dp" 
android:layout marginRight-"8dp" 
android:layout marginTop-"8dp" 
android:orientation-"horizontal" 
app:layout constraintHorizontal bias-"0.0" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomOf-"G8-id/editTextPhone"» 


«RadioButton 
android:id-"( *id/radioButtonMale" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
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android:text-"Hi" /> 


«RadioButton 
android:id-"8-*id/radioButtonFemale" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
android:text-" At" /> 

«/RadioGroup» 


«EditText 
android:id-"Q-crid/editTextAddress" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginLeft-"8dp" 
android:layout marginRight-"8dp" 
android:layout marginTop-"8dp" 
android:ems-"10" 
android:hint-"Jüüh" 
android:inputType-"textPostalAddress" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomOf-"G8-*id/radioGroup" /> 


«Button 
android:id-"Qcid/buttonOk" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginTop-"l6dp" 
android:text-"OK" 
app:layout constraintTop toBottomOf-"Q8-*id/editTextAddress" 
android:layout marginLeft-"8dp" 
app:layout constraintLeft toLeftOf-"parent" /» 


«Button 

android:id-"Q8cid/buttonCancel" 

android:layout width-"wrap content" 

android:layout height-"wrap content" 

android:text-"Cancel" 

android:layout marginTop-"l6dp" 

app:layout constraintTop toBottomOf-"G8-id/editTextAddress" 

android:layout marginRight-"8dp" 

app:layout constraintRight toRightOf-"parent" /» 

«/android.support.constraint.ConstraintLayout» 

«/ScrollView» 


可 以 看 到 我 在 最 外 面包 了 一 个 ScrollView, 使 内 容 可 以 滚动 ,主要 是 因为 界面 中 的 控件 比 
较 多 ， 在 短 屏幕 上 显示 不 全 。 
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啊 应 注册 按钮 进行 ; 


在 RegisterActivity 中 ， 需 啊 应 OK 按钮 和 Cancel 按钮 。 点 击 取 消 时 需 关 闭 本 Activity 返 
回 上 一 个 页 面 ( 即 MainActivity)， 而 点 击 OK 按钮 时 , 要 做 的 工作 就 多 一 些 了 , 这 些 工 作 包 括 : 


d) 取得 各 输入 框 中 的 数据 ; 

(2) ”注册 用 户 〈( 现 在 还 做 不 了 ， 没 有 后 台 服 务 器 〉; 
(3) 设置 返回 数据 ; 

(4) 关闭 本 Activity。 


Activity 要 关闭 自己 ， 调 用 方法 finishO 即 可 ， 当 前 Activity 关闭 后 自然 回 到 了 前 一 个 
Activity， 即 启动 本 Activity 的 那个 Activity。Activity 如 果 想 把 一 些 数据 返回 给 启动 自己 的 那 
个 必须 设置 返回 数据 ， 才 能 在 关闭 时 把 数据 传递 给 启动 它 的 Activity， 设 置 返回 数据 的 方法 是 
setResultO0。 取 消 按钮 的 啊 应 代码 如 下 : 


/ / IB HEP EH 

Button buttonCancel = (Button) findViewById(R.id.buttonCancel); 

/ / TIR ZAHI dr A fT 

buttonCancel.setOnClickListener(new View.OnClickListener() { 
QOverride 


public void onClick(View v) { 
// XØ Activity 
RegisterActivity.this.finish(); 


finishO 是 Activity 的 (也 可 能 是 它 的 父 类 的 ) 实例 方法 ， 所 以 在 内 部 类 中 要 加 上 “外 部 类 
名 .this ”作为 前 级 。 但 是 在 非 静 态 内 部 类 中 可 以 直接 调用 外 部 类 的 实例 方法 ， 于 是 
RegisterActivity.this.finishO 可 以 直接 写成 finish0。 

但 啊 应 OK 按钮 的 点 击 事件 才 是 重点 。 代 码 如 下 : 


/ / IKfd OK H 
Button buttonOk - (Button) findViewById(R.id.buttonOk); 
buttonOk.setOnClickListener(new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
// XE fef 
EditText editTextName - (EditText) findViewById(R.id.editTextName); 


EditText editTextPassword - (EditText) 

findViewById (R.id.editTextPassword); 
EditText editTextEmail = (EditText) findViewById (R.id.editTextEmail); 
EditText editTextPhone = (EditText) findViewById (R.id.editTextPhone); 
EditText editTextAddress - (EditText) 

findViewById (R.id.editTextAddress); 
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radioGroup); 
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// BRIE P HIRIE 
String name = editTextName.getText().toString(); 
String password = editTextPassword.getText().toString(); 
String email = editTextEmail.getText().toString(); 
String phone = editTextPhone.getText().toString(); 
String address = editTextAddress.getText().toString(); 
boolean sex = false; ///f5/ RIMIZ true CRA, false CRZ NHL. 
/ / SE A UC TC ERA PRE P HIIZEHHI ID 
int checkRadioId = radioGroup.getCheckedRadioButtonId(); 
// AX id d TÍUE ZImBU IC M id. WIE sex EX true 
if(checkRadioId -- R.id.radioButtonMale)( 

sex = true; 


} 


// TEM 
//TODO: AFIT ARR AEAT RERA CEZ 


// JÆ Intent HR, RFEA, RIR mS IUBE RIBSEREI UT 
Intent intent = new Intent (); 

intent.putExtra ("name",name); 

intent .putExtra ("password", password); 


// BLEU IBIIIES, B-11 EKE SDK 'PuE X Im, KA Activity EKT 
// IB LT ESGDBSEZSJSuxnRPEIHER Intent XX 
setResult(RESULT OK,intent); 


//X AŠ Activity 
finish (); 


这 些 代码 应 放 在 哪里 呢 ?” 我 们 希望 页 面 一 出 现 , 就 能 点 击 其 中 的 按钮 , 所 以 对 按钮 的 事件 
啊 应 应 在 页 面 显示 之 前 就 搞定 ， 当 然 是 onCreate0 方 法 最 适合 了 。 有 所 以 上 面 两 段 代码 应 放 在 
RegisterActivity 的 onCreate0 方 法 中 ， 注 意 必须 在 setContentView()Z Jr «fi. 

在 Activity 之 间 传 递 数 据 用 Intent， 不 论 是 正 回 传递 还 是 返回 。Intent 中 的 数据 是 以 
key-value 的 形式 存储 ,key 是 一 个 字符 串 , Value 是 值 , 值 的 类 型 必须 是 基本 类 型 (如 int. float 
等 ) ， 也 可 以 是 字符 串 类 (String) ， 但 其 他 的 类 不 行 。 

运行 一 下 ， 没 问题 ， 但 是 数据 没有 返回 。 其 实 我 们 现在 做 的 还 不 够 ， 要 想 返 回 数据 ， 在 局 
动 注册 Activity 时 ， 使 用 startActivityO 是 不 够 滴 。 那 如 何 做 呢 ? 下 文 分 解 。 


获取 页 面 返 回 的 数据 


MainActivity 要 想 获 取 RegiserAcitivity 返回 的 数据 , 在 启动 RegiserAcitivity 时 必须 使 用 方 
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法 startActivityForResultO 而 不 是 startActivityO0。 打 开 MainActivity 类 ， 找 到 启动 注册 页 面 的 地 
方 : 


// PEPERIT H, DER BO (T gr 

Button buttonRegister - (Button) findViewById(R.id.buttonRegister); 

buttonRegister.setOnClickListener(new View.OnClickListener() { 
@Override 


public void onClick(View 


zd 


v) { 
// SEM EEEBBE RATEI LR UI E 
//Éj£üntent, AZ F1z//fJActivity 
Intent intent = new Intent(MainActivity.this,RegisterActivity.class); 
// A Activity 
| startActivity(intent); 
} 
H; 


将 startActivity(intent) 改 为 startActivityForResult(intent,123)。startActivityForResultO 有 两 个 
重 载 的 版 本 ， 我 们 使 用 其 中 一 个 ， 要 求 两 个 参数 ， 一 是 mtent 对 象 ， 二 是 一 个 请 求 码 〈 请 求人 码 
是 一 个 整数 ) 。 它 的 作用 是 什么 呢 ? 它 用 于 标志 是 哪个 Activity 返回 了 。 因 为 我 们 可 以 在 
MainActivity 中 局 动 不 同 的 Activity， 如 采 要 取得 它们 返回 的 数据 ， 必 须 区 分 是 谁 返 回 了 ， 请 
求 码 就 是 用 于 区 分 它们 的 。 

而 要 获取 注册 页 面 返回 的 数据 ， 并 不 能 主动 去 获取 ， 只 能 被 动 获 取 ， 因 为 MainActivity 
并 不 知道 注册 页 面 什么 时 候 关 闭 ， 只 能 等 注册 页 面 通知 MainActivity。 这 可 能 让 你 想起 啊 应 
Click 事件 时 设置 侦 听 器 的 做 法 ， 这 里 不 能 设置 RegisterActivity 关闭 时 的 侦 听 器 ， 因 为 没有 这 
样 的 API， 而 是 需要 在 MainActivity 中 重 写 父 类 的 一 个 方法 : 


void onActivityResult (int requestCode, int resultCode, Intent data) 
第 一 个 参数 是 启动 Activity 时 传 入 的 请 求 码 : 


TED. — Ty T D EL TI 3 

// HAMActivity, EJ UE HAlflActivity WE BIETET: 
d — Am UL | xL TY EI A Ar EZ 

// BL ERES, xb —f EE 


startActivityForResult(intent, 1204273 


第 二 个 参数 是 被 启动 的 Activity 关闭 前 设置 的 结果 码 : 


^ri HOT mI hA Mp 2^ A 号 六- e Vy AA a ES Ez — . . 一 一 7 -人 一 
// RAZ PIH. PI SDK "FE X Ij B. ZezbActivity EHI 


// 8 MEMBRE S RETE EIE RIntent XJ S 
setResult(RESUL 
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//ftEÉ/H startActivityForResult() AH Activity REIH, WAE 
QOverride 


protected void onActivityResult(int requestCode, int resultCode, Intent data) 
i 


if(requestCode == 123){ 
// t AEEA EE [n] T 
if(resultCode == RESULT OK)( 
/ / VÉ AEE Ja T PITERA T data PAGUUSFIEIEEIE 


String name - data.getStringExtra ("name"); 

String password = data.getStringExtra ("password"); 

/ LB ELS X F 

Log.i("testLogin","name = "-cname-c",password = "-password); 

} 

} 
/ / EH — P CASH SEE 
super.onActivityResult (requestCode, resultCode,data); 


6.5.4 避免 音量 重复 出 现 

在 运行 代码 之 前 ， 先 优化 一 下 代码 ， 因 为 有 一 处 很 明显 需要 优化 : 启动 注册 Activity 时 的 
请 求 码 是 “123”， 这 个 常量 被 用 到 了 两 次 ,为 了 避免 出 错 ， 我 们 应 把 它 定 义 成 类 的 final 型 变 
量 , 而 且 由 于 此 变量 的 值 不 会 改变 ， 也 就 没 必要 让 它 在 不 同 的 类 的 实例 中 各 保持 一 份 ， 所 以 把 
它 置 为 static， 使 它 属 于 类 而 不 是 类 的 实例 。 所 以 我 在 MainActivity 中 定义 一 个 final 型 变量 
REGISTER REQUEST CODE, Jf: 


public class MainActivity extends AppCompatActivity { 


static final int REGISTER REQUEST CODE x 123; 


在 出 现 “123” 的 地 方 我 都 用 这 个 变量 来 代 蔡 (都 在 MainActivity 类 中 ) : 


// E SELLE HERAA f frs 
Button buttonRegister - (Button) findViewById(R.id.buttonRegister); 
buttonRegister.setOnClickListener((v) » { 


FF M-J rr ET] 
/ Ty 357 427 31] 4) X 
/ / JTELLA IK ELL OX INTJ 


// &í££Intent. JE873E FizjActivity 


Intent intent - new Intent(MainActivity.this,RegisterActivity.class); 


一 一 


//.EhajActivity, ZAIE 


一 一 


M EfActivity Pri I IR E, mp 
// B LUPIS £S—— ES 
startActivityForResult(intent,REGISTER REQUEST CODE); 


// ft &/j startActivityForResult() J&EzgjActivityauk/[mWy, ALED A 


QOverride 


protected void onActivityResult(int requestCode, int resultCode, Intent data) { 
if(requestCode == REGISTER REQUEST. CODE)( 


同 理 ， 我 们 通过 Intent 传递 用 户 名 和 密码 时 ，key 的 名 字 “name” 和 “password” 也 被 多 
次 使 用 ， 所 以 也 有 必要 把 它们 搞 成 final 型 的 变量 。MainActivity 中 : 
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1 AEE RA BE E 

EE dea == RESULT OK)( 
// TE PB EVE IL a PRITE T., Mdata'P His HIE 
e name = data. — KEY NAME); 


String password - data.getStringExtra(EXTRA KEY ^ PASSWORD) ; ] 


一 一 


= Bs — f 
// HI Hy I7 IL D] Fan /^ 


Log.i("testLogin","name = "«name-",password = "«password); 


RegisterActivity 中 : 


//&l£&Intent 3R, RRR PHIR, EI] 

Intent intent = new Intent(); 
intent.putExtra(MainActivity.EXTRA KEY NAME,name); 
intent.putExtra Š inActivity. zm Ys 


// RE RRP H P P ESEUDESDK'TUE X ET. vegsbActivity I. 4914 fr 
// B — P RELBUE BIS E FA " F HIntent iR 
setResult(RESULT ok, intentis 


这 样 做 的 最 大 好 处 是 什么 ? 其实 这 并 不 会 提高 程序 的 运行 效率 , 但 是 提高 了 代码 维护 的 效 
率 ， 不 用 每 次 在 用 到 的 地 方 都 输入 和 常量， 万 一 输 错 了 呢 ?” 这 不 是 自己 挖 坑 吗 ? 


6.5.2 日 志 输 出 


我 们 使 用 了 Log 类 的 方法 来 输出 日 志 : 
/ BEL BU RCRRHL— TF 


Log.i("testLogin","name = "+name+",password = "-password); 


日 志 输 出 到 哪里 呢 ? 如 图 6.5.2.1 所 示 。 


I CX EX, X ALS CL HJ AX I 
LA- -PEKRE 
Android Monitor 


38 Emulator Nexus 4 API 25 Android 7.1.1, API 25 E niuedu.com.andfirststep (2565) 


LO rx loggat Monitors =+" Verbose (Q7 | 4 ] Regex 
( „Verbose E B 


o 06-14 08:55:09. 091 2565-2565/niuedu. com. andfirsts step I/art: Not late-enabling -Xcheck:jni (already on) 
06-14 08:55:09. 091 2565-2565/niuedu. com. andfirststep W/art: Unexpected CPU variant for X86 using defaults: 
06-14 08:55:09. 282 2565-2565/niuedu. com. andfirststep W/System: ClassLoader referenced unknown path: /data 


& Build Variants 


p] 
r$ 
o. 


06-14 08:55:09, 294 2565-2565/niuedu. com. andfirststep I/InstantRun: starting instant run server: is main p 
06- um 08:55:09, 567 2565-2565/niuedu. com. andflrststep W/art: Before Android 4.1, method android. graphics. Pi 


É 
£ 
: 
k 


lr 4: Run EJ Ey 6 Android Mir iO Messages — [B Terminal 


6.52.1 


日 志 在 Android Monitor (监视 ) 窗口 中 输出 (图 中 下 方 标 记 1 处 ) 。 可 以 看 到 日 志 总 是 
一 大 堆 ， 有 不 同 的 颜色 。 这 些 日 志 是 你 所 连接 的 虚拟 机 或 真实 的 设备 中 输出 的 。 有 Android 系 
统 输出 的 ， 也 有 App 输出 的 。 颜 色 代表 级 别 ， 可 以 在 标记 3 所 示 的 组 合 框 中 选择 级 别 。 从 高 
到 低 分 别 为 : Verbose、Debug、Info、Wam、Error、Assert。 并 不 是 选 哪个 级 别 就 只 显示 那个 
级 别 的 日 志 ， 而 是 显示 这 个 级 别 和 低 于 这 个 级 别 的 日 志 ， 比 如 你 选 了 Info， 那 么 Info. Warn. 
Error、Assert 级 别 的 日 志 都 会 输出 。 
在 代码 中 ， 可 以 调用 Log 的 Log.vO0、Log.d0、Log.i0、Log.w0O、Log.e0、Log.wtftO 来 输 
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出 不 同 级 别 的 日 志 。 这 六 个 方法 都 需要 两 个 参数 : 第 一 个 参数 是 一 个 字符 串 , 叫 作 tag (标记 )， 
就 是 所 输出 的 志 的 “:” 前 的 部 分 ， 第 二 个 参数 也 是 字 串 ， 就 是 “:” 后 面 的 内 容 。 

且慢 ! 竟然 有 方法 名 叫 wft ?这 种 事 也 能 发 生 ? 吓 得 我 赶紧 查 了 一 下 Android 的 文档 压 压 
惊 ， 原 来 wft 是 “What a Terrible Failure” 的 意思 ， 咽 ， 这 个 名 字 还 是 很 科学 嘛 。 

标记 4 处 的 是 一 个 搜索 框 ， 因 为 是 实时 搜索 ,所 以 更 像 一 个 过 滤 框 ， 即 在 它 里 面 输入 的 字 
符 会 立即 起 到 对 日 志 输 出 过 滤 的 作用 : 仅 包含 过 滤 字 符 串 的 日 志 才 会 输出 。 测 试 一 下 ,运行 我 
们 的 App, 进入 注册 页 面 , 在 注册 页 面 的 用 户 名 和 密码 框 中 输入 名 字 和 密码 , 然后 点 OK 按钮 ， 
此 时 会 回 到 登录 页 面 ， 虽 然 在 界面 上 看 不 到 变化 , 但 是 MainActivity 已 经 取得 返回 的 数据 并 打 
印 出 来 了 。 可 以 在 监视 窗口 中 看 到 Log.i0 所 输出 的 日 志 ， 如 图 6.5.22 所 示 。 


Android Monitor 
88 Emulator Nexus 4 API 25 Android 7.1.1, API 25 niuedu.com.andfirststep (5225) 


193 i'i logcat | Monitors +" Verbose Bd ‘Q7 testLogin e Regex 


t$ 06-15 08:46:28. 329 5228-5228 /niuedu. com. andfirststep L/testLogin; e = lao liu, passvord = iiii 


= 
$ 


l4 Run ^*TODO | 4€ Android Monitor — [E|Terminal == 0: Messages 
6.5.22 


我 把 所 输出 的 日 志 的 tag 作为 过 滤 字 符 串 之 后 , 在 窗口 中 就 只 剩 下 了 我 们 输出 的 这 一 条 日 
志 了 。 我 们 可 以 看 到 name 和 password 的 值 都 得 到 了 。 


6.5.3 将 返回 的 数据 设置 到 控件 中 

要 做 的 还 没完 。 我 们 还 要 把 注册 页 面 返回 的 用 户 名 和 密码 设置 到 登录 页 面 的 用 户 名 和 密码 
输入 框 中 。 此 段 代 码 当 然 应 放 在 onActivityResult0 方 法 中 ， 蔡 换 日 志 输 出 那 句 。 但 我 们 需要 在 
此 方法 中 获取 用 户 名 和 密码 两 个 控件 。 回 头 看 一 下 MainActivity 的 onCreate(0 方 法 中 ， 已 经 获 
取 过 一 次 用 户 名 控件 了 : 


, Gi AD Zn OO TEA A +A PE 
1d KERA BLA TETI 


EditText editTextName = (EditText) findViewById(R.id.editTextName); 


// ANCER E È BERE. 


editTextName.setHint(" 请 输入 用 户 名 "); 


而 此 时 在 onActivityResult0 方 法 中 又 要 重新 获取 ， 本 来 重复 获取 也 没什么 , 但 是 组 成 界面 
的 控件 在 内 存 中 是 一 棵 树 ， 我 们 知道 在 树 中 查找 节点 是 很 耗 时 的 ， 而 fndViewById0 显 然 是 根 
据 ID 查找 控件 ， 所 以 这 个 方法 的 执行 是 耗 时 的 ， 所 以 如 果 多 处 操作 一 个 控件 ， 应 该 用 一 个 成 
NEE 〈 也 叫 字 段 ) 把 它 保 存 下 来 。 所 以 我 们 在 MainActivity 中 添加 两 个 变量 : 
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public class MainActivity extends AppCompatActivity { 
static final int REGISTER REQUEST CODE = 123; 
static final String EXTRA KEY NAME - "name"; 
static final String EXTRA KEY PASSWORD - "password"; 


EditText editTextName; 
EditText editTextPassword; 


然后 在 Activity 的 onCreate0 方 法 中 ，setContentViewO 被 调用 之 后 获取 并 保存 下 这 两 个 控 


件 


protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 


// ALayout £228 X fF PER TS ET JE T B Activity- 
pm layout. en main); 


/ i / EY H7 户 £ A2 4 ; a. o A À MJ i E yf 
editTextName = (EditText) findViewById(R.id.editTextName); 
editTextPassword = (EditText) findViewById(R.id.editTextPassword); 


把 原先 获取 用 户 名 输入 框 并 保存 到 临时 变量 中 的 那 一 句 去 挥 , 即 下 面 代码 块 中 红 框 所 框 的 
Efi 


// Hid Sl/g ^ RALEA 

EBENE editTextName = (EditText) findViewByIQ(R.id.editTextName); 
// ITUR IE E E BUE. 

editTextName. setHint(" 请 输入 用 户 名 "); 


然后 在 onActivityResult0 方 法 中 加 入 以 下 两 行 : 


X E 


JERA startActivityForResult() 

Bip rids 

protected void onActivityResult(int requestCode, int resultCode, Intent data) ( 
irs ret == REGISTER ! REQUEST CODE)( 


ab Activity3&[gH/, gA 


if(resultcode zz RESULT. Tum 

// id HEEL D P I 5bJA2 r. Mdata FEE 
String name - data. smate nese EE DA. KEY ^! NAME): 
String password - data.getStringExtra(EXTRA KEY PASSWORD); 


T ree a X. P 92/7 Bp VII. STI. 
7; C GT ikv ALL d) E SUE. r EYIT us 


35 M "FL ; 
-L TIDI 3 F L HJ JL 


editTextName.setText(name); 
editTextPassword.setText(password); 


) 


super.onActivityResult(requestCode,resultCode,data); 


运行 试 一 下 吧 ! 在 注册 页 面 输入 用 户 名 和 密码 ， 点 OK 按钮 ， 回 到 登录 页 面 ， 是 不 是 用 户 
名 和 密码 显示 在 相应 的 控件 中 了 ? 
总 结 一 下 这 个 过 程 : 
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(1) ”启动 Activity 时 用 方法 startActivityForResult(). 
(2) 重 写 onActivityResult0 方 法 获取 返回 的 数据 。 
(3) 用 setResult0 设 置 返回 数据 。 

(4) H request code 区 分 是 哪个 Activity 返回 了 。 
(5) Activity 之 间 传 递 数据 用 Intent. 


Action Bar 上 的 返回 图 标 


Action Bar ， 翻 译 为 “动作 栏 ”， 但 也 有 人 把 它 称 作 “导航 栏 ”、App Bar( 那 个 人 就 是 
R) 。 不 论 是 登录 页 面 ， 还 是 注册 页 面 ， 它 们 都 有 Action Bar， 即 如 图 6.6.1 红 框 所 示 。 


图 6.6.1 


Android 推荐 我 们 在 Action Bar 上 显示 返回 图 标 ， 位 置 就 在 Action Bar 的 最 左边 ， 也 就 是 
上 图 中 的 标题 位 置 。 点 它 时 返回 上 一 个 页 面 (注意 点 它 时 做 什么 ， 由 我 们 决定 ， 我们 当然 是 让 
它 返 回 上 一 个 页 面 了 ,并 不 是 它 默认 就 有 此 功能 ) 。 然而 , 默认 下 这 个 返回 图 标 它 是 不 显示 的 ， 
我 们 需要 写 代 人 码 把 它 显 示 出 来 。 

首先 要 明白 ， 在 入 口 页 面 ， 即 登录 页 面 CMainActivity) 返回 的 话 ， 其 实 是 关闭 Appo m 
在 注册 页 面 返回 时 是 返回 到 登录 页 面 。 登 录 页 面 与 注册 页 面 实 现 Action Bar 的 方式 不 一 样 ， 所 
以 我 们 都 要 演示 一 下 。 


6.6.1 原生 Action Bar 5 MaterailDesign Action Bar 


登录 页 面 与 注册 页 面 的 Action Bar 的 区 别 在 哪里 呢 ? 登录 页 面 使 用 的 是 原生 Action Bar; 
而 注册 页 面 使 用 的 是 符合 Android 最 新 视觉 设计 思想 MaterailDesign 的 目 定 义 Action Bar。 对 
比 一 下 两 个 Activity 的 layout 文件 ， 图 6.6.1.1 是 登录 页 面 的 ， 其 最 外 层 是 一 个 ScrollView， 它 
代表 的 是 内 容 区 ， 跟 ActionBar 无 关 ， 我 们 之 所 以 能 看 到 ActionBar， 是 因为 Activity 目 市 了 
ActionBar。 图 6.6.1.2 所 示 是 注册 页 面 。 
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Component Tree 
Component Tree 


| ScrollView oe 
I RelativeLayout mi CoordinatorlLayout 


PA imageView2 : ^" AppBarLayout 


abc editTextName M toolbar 
abc editTextPassword 


ok buttonLogin - — — 
OK buttonRegister - 注册 Q fab (FloatingActionButton) 


DA «include» - &layout/content register 


6.6.1.1 6.6.1.2 


它 的 最 外 层 是 一 个 CoordinatorLayout， 先 不 要 在 意 这 个 Layout 的 作用 ， 你 可 以 看 到 这 个 
Layout 包含 了 AppBarLayout， 其 又 包含 了 ToolBar。 我 们 在 注册 页 面 看 到 的 Action Bar, wije 
ToolBar 控件 。 也 就 是 说 , 注册 页 面 中 自己 实现 了 一 个 Action Bar, 那么 就 需要 把 原生 的 Action 
Bar 隐藏 反 ， 否 则 就 显示 两 个 ActionBar 了 。 如 何 隐藏 呢 ? Android 己 经 为 我 们 提供 了 非常 简单 
的 作法 : 使 用 Theme。Android 使 用 哪 种 theme 是 在 Manifest 文件 中 定义 的 : 


«application 
android:allowBackupz"true" 
android:iconz"Qmipmap/ic launcher" 
android:labelz"AndFirstStep" 
android:roundIcon-"Qmipmap/ic launcher round" 
android:supportsRtl-"true" 
android:themez"gstyle/AppTheme"» 
«activity 
android:namez".MainActivity" 
android:label-"Qstring/title activity login" 
android:screenOrientation-"portrait"» 
«intent-filter» 
«action android:name-"android.intent.action.MAIN" /> 


«category android:name-"android.intent.category.LAUNCHER" /> 
«/intent-filter» 
«/activity» 
«activity 
android:name-z".RegisterActivity" 
android:1labelz"ii J|" 
android:themez"gstyle/AppTheme.NoActionBar"»«/activity» 
«/application» 


application 也 有 theme 属性 ， 它 决定 了 默认 的 theme, "ll Activity 中 不 指定 theme 时 ， 
就 使 用 application 中 所 规定 的 。 而 Activity 也 可 以 单独 设置 theme, S% mf application 的 
theme。 
默认 的 theme “AppTheme” 是 显示 原生 ActionBar 的 ， 而 RegisterActivity 使 用 的 theme 
“AppTheme.NoActionBar” 从 名 字 就 能 看 出 是 没有 ActionBar 的 ， 即 不 显示 原生 的 ActionBar。 
所 以 RegisterActivity 中 利用 特殊 的 Layout 控件 和 ToolBar 目 定 义 了 ActionBar， 这 种 方式 符合 
Android 最 新 的 UI 设计 思想 : MaterailDesgin. 
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6.6.2 ”登录 页 面 显示 退回 图 标 


要 想 设 置 返回 图 标 ， 需 要 先 获 得 ActionBar 对 象 。 登 录 页 面 用 的 是 Android 原生 的 
ActionBar， 上 所 以 只 需 调 用 方法 getSupportActionBar0 即 可 获得 ActionBar 对 象 ， 然 后 就 以 搞 它 
了 。 注 意 ，Activity 还 有 个 方法 getActionBar0， 看 起 来 也 是 获取 ActtionBar， 但 是 ， 它 是 不 能 
用 的 ， 因 为 我 们 在 创建 Activity 时 ， 使 用 了 Support 库 中 的 类 ， 有 图 为 证 〈 见 图 6.6.2.1) 。 


import android.support.v7.app.AppCompatActivity; 
import android.view.View; 
import android.widget.Button; t 


import android.widget.EditText; 


public class MainActivity extends AppCompatActivity ( 
static final int REGISTER REQUEST CODE = 1231; 
static final String EXTRA KEY NAME - "name"; 
static final string EXTRA KEY. PASSWORD - "password"; 


图 6.6.2.1 


可 以 看 到 MainActivity 从 类 AppCompatActivity 派生 ， 而 AppCompatActivity 属于 support 
库 。 如 果 不 使 用 Support 库 时 ， 束 要 使 用 getActionBar0 获 取 ActionBar 了 了。 
全 于 如 何 摘出 返回 图 标 ， 匈 下 面 代码 : 


laf- rfs 


PAALI mre E —- mE O iv 2 c^ mi 
// JALayout RRF FPM RIEF A WE EActivity. 


setContentView(R.layout.activity main); 


//3iEvcAction bar 


android.support.v7.app.ActionBar actionBar - this.getSupportActionBar(); 


actionBar.setDisplayHomeAsUpEnabled(true); 


图 6.6.22 
如 何 啊 应 对 它 的 点 击 呢 ?并 不 是 设置 侦 昕 器 ， 而 是 需要 在 Activity 类 中 重 写 父 类 的 方法 : 
onOptionsItemSelected0。 代 码 如 下 : 


QOverride 
public boolean onOptionsItemSelected(MenuItem item) { 


int id = item.getItemId(); 
if (id == android.R.id.home) { 
//H f Action bar EHI PIRR 
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// En — FAF: BER — KBH 
Snackbar snackbar = Snackbar.make(editTextName, 


"你 再 点 我 ， 我 真 要 退出 了 ! "， 
Snackbar.LENGTH LONG); 
// A zc Eaz nd 
/ / EZIN REZ 


snackbar.show(); 
return true; 


) 


return super.onOptionsItemSelected (item); 


这 个 方法 的 参数 是 MenuItem 类 型 ， 看 名 字 是 一 个 菜单 项 。 其 实 这 个 方法 就 是 用 于 啊 应 羔 
单 选择 的 。 所 以 ActionBar 上 的 返回 图 标 其 实 也 是 一 个 菜单 项 ， 其 ID 是 内 置 的 ， 叫 作 
android.R.id.home. 

我 们 获取 菜单 项 的 ID， 然 后 进行 比较 ， 如 果 是 返回 图 标 被 选择 了 ， 就 癌 用 户 发 出 提示 。 
注意 在 这 个 方法 中 ， 当 一 个 全 单项 被 啊 应 后 ， 应 返回 true。 

还 有 ， 注 意 Snackbar.make(0 方 法 的 第 一 个 参数 ， 是 一 个 按钮 ， 并 不 是 想 把 提示 显示 在 按 
钮 中 ， 而 是 会 从 按钮 开始 目 动 找 一 个 合适 的 父 控件 来 显示 提示 。 


6.6.3 注册 页 面 显 示 返 回 图 标 
在 RegisterActivity 的 onCreate0) 方 法 中 ， 可 以 看 到 这 两 句 : 


(jOverride 

protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity register); 


Toolbar toolbar - (Toolbar) findViewById(R.id.toolbar); 
setSupportActionBar(toolbar); 


先 获取 layout 中 定义 的 ToolBar， 然 后 将 这 个 toolbar 设置 成 Support Action Bar, BEZAdE 
ToolBar 模拟 成 了 Action Bar， 那 么 我 们 是 不 是 可 以 通过 getSupportActionBar0 来 获取 Action 
Bar ? 是 不 是 可 以 通过 调用 Action Bar 的 setDisplayHomeAsUpEnabled0 方 法 显示 出 返回 图 标 ? 
是 不 是 可 以 在 方法 onOptionsItemSelected0 中 啊 应 其 选中 事件 ? 全 对 ! 

我 们 点 击 返回 图 标 是 要 返回 登录 页 面 (MainActivity) 的 ， 所 以 应 在 啊 应 其 选中 事件 的 方 
法 中 关 挥 当前 Activity; 其 处 理 方式 跟 Cancel 按钮 完全 一 样 (此 方法 位 于 RegisterActivity 中 ) : 

QOverride 
public boolean onOptionsItemSelected(MenuItem item) { 
int id = item.getItemId(); 

if (id == android.R.id.home) { 

//H f Action bar EBAiRI/nIÉEs 
finish(); 


return true; 


) 


return super.onOptionsItemSelected (item); 
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前 面 讲 Activity 的 时 候 ， 讲 到 了 Theme。 现 在 该 到 了 和 弄 清 theme 是 什么 的 时 候 了 。 

Theme 也 叫 Style， 它 们 是 相同 的 概念 ， 只 不 过 作用 到 Activity 上 就 叫 theme， 作 用 到 控件 
Est] style. 

Style/theme 中 包含 了 一 堆 与 控件 或 窗口 的 外 观 相 关 的 属性 ， 比 如 高 、 宽 、 空 白 大 小 、 前 
景色 、 字 体 大 小 、 字 体 颜 色 等 。 如 果 你 玩 过 HTML+CSS, 你 就 知道 Style/Theme 就 相当 于 CSS, 
利用 它 实 现 了 界面 的 内 容 与 设计 相 分 离 的 模式 ，layonut 文件 中 定义 了 界面 的 内 容 ， 而 style X 
件 中 定义 了 界面 的 外 观 。style 也 是 一 种 资源 ， 它 放 在 哪里 呢 ? 如 图 7.1 所 示 。 


© drawable 

[51 layout 

[£1 mipmap 

[51 values 
ii colors.xml 
kè dimens.xml 
Eà strings.xml 


我 的 styles.xml 中 的 内 容 如 下 : 


<resources> 

«!-- Base application theme. --> 

«style name-"AppTheme" parent-"Theme.AppCompat.Light.DarkActionBar"» 
«!-- Customize your theme here. --» 
<item name-"colorPrimary"»(8color/colorPrimary«c«/item» 
<item name-"colorPrimaryDark"»(8color/colorPrimaryDark«/item» 
«item name-"colorAccent"»(icolor/colorAccent«/item» 

«/style» 


«style name-"AppTheme.NoActionBar"-^ 
«item name-"windowActionBar"»falsec«/item» 
«item name-"windowNoTitle"»truec/item» 
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</style> 


<style name="AppTheme .AppBarOverlay" 


parent-"ThemeOverlay.AppCompat.Dark.ActionBar" /> 
«style name-"AppTheme.PopupOverlay" parent="ThemeOverlay .AppCompat.Light" 
/> 


</resources> 


此 文件 中 定义 了 四 个 <style> 元 素 。 第 一 个 style 就 是 我 们 Application 中 指定 的 默认 theme 
(H manifest XF) , name 属性 定义 它 的 名 字 “AppTheme”，<item> 元 素 指 明了 这 个 style 

中 定义 了 哪些 与 界面 外 观 相 关 的 属性 .item 的 name 必须 是 某 个 控件 或 窗口 的 属性 的 名 字 , item 
的 内 容 根据 所 对 应 的 属性 不 同 而 有 不 同 的 值 ， 比 如 规定 colorPrimary (主要 颜色 ) 的 item， 它 
的 值 “@color/colorPrimary” 是 一 个 颜色 资源 (以 “@” 开 头 表示 用 ID 引用 一 个 资源 ) 。 这 
个 style 如 何 起 作用 呢 ? 如 果 把 这 个 style 应 用 到 某 个 Activity 中 ， 如 果 这 个 Activity 包含 了 某 
个 控件 , 并 且 它 具有 叫 作 ”colorPrimary ”的 属性 , 那么 这 个 属性 就 被 设 为 “@color/colorPrimary” 
所 引用 的 颜色 。 如 果 没 有 控件 具有 此 属性 ， 那 么 此 item 就 不 起 作用 ， 当 然 也 无 害 。 

可 以 在 某 个 已 存在 的 style 的 基础 上 做 少量 改动 而 形成 新 的 style, 作为 基础 的 style 就 是 区 
t. AppTheme 这 个 style 的 parent 属性 指定 了 它 从 那个 已 定义 的 style 继承 。 

将 style 设置 给 Activity 或 Application, 要 使 用 属性 “android:theme”( 在 manifest 文件 中 )， 
设置 给 控件 时 ， 使 用 属性 “style” CE layout 文件 中 ) 。 

可 以 在 style 文件 中 定义 控件 和 窗口 的 哪些 属性 呢 ? 自己 上 网 查 查 吧 。 


114 


ss 8 E 


Fragment 


这 是 一 个 非常 重要 的 组 件 ! 

Fragment 既 像 Activity， 又 与 Activity 有 很 大 差别 ， 这 不 是 几 人 句 话 能 讲 清 的 。 首 先 要 记 住 
的 是 , Fragment 也 可 以 像 Activity 一 样 表 示 一 个 页 面 , 但 Fragment VIRKE Activity 才能 显示 
出 来 ， 即 Fragment 被 Activity 所 包含 。 


E 元 实际 上 Activity 与 Fragment 都 不 是 那么 简单 就 能 定义 的 。 因 为 这 本 书 是 面向 零 基础 的 初 
” Bk, 所 以 不 能 一 上 来 就 全 面 解释 各 种 东西 ,我 只 能 给 你 一 个 具体 的 初步 概念 ， 随 着 后 面 
的 深入 ， 你 自己 就 对 它们 有 全 面 的 了 解 了 。 


Fragment 在 很 多 方面 与 Activity 相似 ， 而 Fragment 是 从 Android3.0 才 出 现 的 。 注 意 ， 
Fragment 并 没有 为 Android 系统 提供 比 Activity 更 多 的 功能 ， 那 为 什么 又 整 出 个 Frgament 呢 ? 


弄巧成拙 的 Activity 


我 一 直 认 为 Android 中 对 Activity 的 设计 有 问题 。 先 不 要 受惊 ， 听 我 慢 慢 道 来 (以 下 纯粹 
个 人 观点 ! ) 。 

Activity 被 Android 设计 成 一 个 非常 独立 的 部 件 ， 并 由 此 淡化 了 进程 的 概念 。 

Android 希望 这 样 为 用 户 提供 功能 :由 多 个 Activity 共同 配合 完成 比较 复杂 的 功能 ， 而 这 
些 Activity 可 以 来 目 不 同 的 App。 比 如 说 一 个 功能 需要 四 步 完 成 ， 那 么 就 要 有 四 个 Activity; 
可 能 其 中 第 一 个 来 自 你 的 App， 而 第 二 个 是 系统 自 带 的 某 个 App 中 的 Activity， 第 三 个 是 其 他 
人 开发 的 App 中 的 茶 个 Activity， 第 四 个 又 是 你 自己 App 中 的 Activity， 而 它们 四 个 可 以 无 缝 


d Z7. 
结 HO o 


因为 Activity 要 被 别人 使 用 , 所 以 在 设计 一 个 页 面 时 , 就 不 能 只 考虑 仅 满 足 自 己 App 中 的 
需求 ， 而 需要 把 Activity 封装 得 很 独立 。 这 一 点 可 以 从 Activity 的 启动 方式 和 数据 传递 方式 体 
现 出 来 。 就 拿 我 们 前 面 的 登录 页 面 与 注册 页 面 来 讲 ,， 如 果 我 们 想 从 登录 页 面 癌 注册 页 面 传递 数 
Hi 假设 可 以 用 new 创建 Activity 实例 , 我 们 完全 可 以 通过 构造 方法 的 参数 同 注 册页 面 传递 数 
据 。 但 是 ，Adnroid 不 允许 ! Activity 必须 通过 Intent 局 动 (其 实 是 由 系统 创建 Activity 实例 ) ， 
传递 数据 也 必须 通过 Intent。 
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然而 在 Activity 之 间 传 递 数据 时 ， 即 使 不 能 用 构造 方法 直接 传递 ， 也 可 以 用 静态 变量 传递 
Wk! 还 是 拿 登 录 与 注册 页 面 来 说 ， 它 们 俩 都 属于 同一 个 进程 无 疑 ， 它 们 俩 当然 可 以 访问 App 
中 的 同一 个 静态 变量 了 , 但 是 , 不 要 这 样 做 ! 因为 同一 个 App 中 的 Activity 也 可 以 运行 于 不 同 
的 进程 ! 你 也 可 以 在 Manifest 文件 中 配置 某 个 Activity 只 运行 在 单独 的 进程 中 , 即 每 次 启动 它 ， 
都 需要 启动 一 个 新 的 App 进程 。 

Android 要 求 Activity 封装 独立 ， 除 了 满足 这 种 极端 的 重用 性 要 求 外 ， 还 有 一 个 原因 就 是 
节省 内 存 。 既 然 Activity 是 功能 封闭 的 ， 那 么 Android 系统 可 以 随时 杀 死 看 不 到 的 Activity 来 
释放 内 存 ， 等 需要 它 重新 显示 时 ， 系 统 先 把 它 创 建 出 来 ,再 恢复 它 原 来 的 样子 。 比 如 一 个 功能 
有 三 个 页 面 : A、B、C， 用 户 从 A 到 B 到 CC 一步 一 步 执行 。 显 示 C 时 ，AB 是 都 看 不 到 的 ， 
如 果 启 动 C 时 发 现 内 存 不 够 了 ， 那 么 系统 就 把 A 和 B 杀 死 ， 杀 死 它们 时 会 把 它们 的 内 容 保 存 
到 硬盘 上 。 而 用 户 是 感觉 不 出 什么 异样 的 ， 因 为 此 时 用 户 能 看 到 C 页 面 还 活着 。 而 当 用 户 想 
返回 上 一 个 页 面 〈 也 就 是 B) 时 ， 系 统 会 重新 创建 B 并 把 B 原来 的 内 容 恢复 ， 这 对 用 户 来 讲 ， 
完全 感觉 不 出 B 是 死 而 复生 的 。 

现在 明白 为 什么 Activity 不 能 被 new 出 来 了 吧 ? 必须 由 系统 掌控 Activity 的 生死 ; 现在 明 
白 为 什么 Activity 之 间 必 须 用 Intent 传递 数据 了 吧 ? Activity 必须 功能 封闭 ;现在 明白 为 什么 
Activity 要 在 manifest 文件 中 声明 了 吧 ? 这 样 系统 才能 找到 Activity 的 类 ， 然 后 以 反射 的 方式 
创建 它 。 

看 来 这 个 设计 好 牛 啊 ! 果然 开发 者 是 高 手 。 但 是 呢 ， 有 时 看 起 来 很 美的 东西 ， 用 起 来 并 不 
美好 。 从 其 实际 使 用 效果 来 讲 ， 实 在 算得 上 是 弄巧成拙 : 


@ 第 一 , 写 一 个 Activity 很 麻烦 ,为 了 功能 封闭 , 为 了 能 满 血 复活 , 你 要 多 做 很 多 工作 ， 
有 时 其 逻辑 还 很 复杂 ， 让 人 焦头烂额 。 

@ 第 二 ， 使 Activity HAARE, bA, bA CPU 多 。 

@ 第 三 ,造成 Activity 生命 周期 复杂 , 令 人 讨厌 。 你 上 网 查 一 下 Activity 的 生命 周期 吧 ， 
要 弄 明 白 也 够 你 头疼 的 。 

€ 第 四 ，Activity 在 切换 时 每 次 都 被 重新 创建 ， 执 行 大 量 代 码 ， 尤 其 恢复 数据 时 要 读 硬 
盘 (就 是 存储 ) ， 造 成 界面 反应 慢 ， 卡 卡 卡 。 

@ 第 五 ， 你 如 果 想 到 其 他 方面 请 补充 。 


实际 上 当初 不 搞 这 么 高 级 ,依然 按照 传统 的 以 进程 为 中 心 的 方式 来 设计 App, Am Android 
系统 可 能 比 现在 的 运行 体验 还 要 好 一 些 : 


€ 第 一 ，Activity 不 用 写 那么 复杂 ， 如 果 App 进程 只 要 存在 ，App 中 的 Activity 就 不 会 
被 杀 死 ， 那 么 不 用 考虑 Activity 复活 的 问题 ， 所 以 界面 切换 反应 肯定 要 快 得 多 。 

e 第 二 ， 其 生命 周期 逻辑 也 变 得 简单 ， 处 理 代 码 也 就 少 了 ， 这 本 身 就 省 内 存 ，CPU 执 
行 的 代码 也 少 了 ， 省 CPU. 

e 第 三 ， 内 存 不 够 怎么 办 ? 要 记 住 Android 系统 不 是 单片机 ， 而 是 跟 Windows 一 样 的 
高 级 操作 系统 ， 它 是 有 虚拟 内 存 (Linux 下 叫 交换 分 区 ) 的 ， 内 存 不 可 能 不 够 用 。 如 
果 物 理 内 存 不 够 用 , 后 台 的 Activity 会 被 交换 到 硬盘 上 的 虚拟 内 存 中 , 而 不 必 杀 死 它 。 
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第 8 章 Fragment 


即使 要 释放 内 存 ， 可 以 杀 后 台 进 程 嘛 ， 不 要 杀 Activity. 

€ 第 四 ，Activity 的 重用 怎么 办 ? 重用 什么 啊 ， 少 年 你 想 多 了 。 我 的 Activity 才 不 想 给 
别人 使 用 ， 费 那 劲 干 嘛 ? 而 且 我 也 不 想 用 别人 的 Activity， 因 为 它们 的 配色 、 排 版 、 
使 用 模式 可 能 跟 我 的 设计 差别 很 大 ， 放 在 一 起 不 和 谐 。 

e 第 五 ， 至 少 可 以 让 我 用 系统 提供 的 Activity 吧 ? 这 个 可 以 啊 ， 不 用 Activity 的 方式 ， 
系统 也 可 以 以 其 他 方式 提供 给 我 们 这 些 功 能 ， 比 如 一 个 类 库 的 形式 。 


Android 系统 占 内 存 多 , 运行 慢 , 经 常 卡 , 我 认为 其 根本 原因 在 于 Activity 的 设计 ， 而 Java 
语言 的 影响 并 不 大 ， 因 为 Google 已 经 把 Java 优化 得 不 错 了 。 虽 然 现 在 硬件 都 很 强大 了 ， 内 存 
也 过 剩 , Android 卡 的 问题 比 原来 少 得 多 了 , 但 是 相同 配置 下 , Android 还 是 比 10S 和 WinPhone 
系统 要 慢 得 多 。 

后 来 Fragment 的 出 现 ,我 认为 是 Google ZA Y Activity 这 种 设计 了 ,所 以 搞 了 个 Fragment. 
Android 系统 并 不 是 Google 发 明 的 ， 是 从 别人 手 里 买 的 。 

我 认为 Fragment 主要 就 是 提高 页 面 间 切 换 效 率 而 出 现 的 ， 虽 然 它 也 可 以 成 为 页 面 的 一 部 
分 而 不 是 总 是 点 据 整 个 页 面 。 总 之 我 感觉 Google 是 推荐 我 们 尽量 使 用 Fragment 来 代替 
Activity， 我 本 人 更 是 认为 一 个 App 尽量 减少 Activity， 各 页 面 尽量 由 Fragment 实现 ! 下 面 我 
们 融 玩 弄 一 下 Fragment. 


8 .2 使 用 Fragment 


我 们 只 要 在 添加 Activity 时 ， 选 中 Fragment 项 ，Android Studio 就 会 自动 产生 一 个 带 有 
Fragment 的 Activity。 现 在 让 我 们 添加 一 个 新 的 Activity， 命 名 为 TestFragmentActivity， 首 先 
在 工程 的 app 组 上 点 出 右键 菜单 ， 如 图 8.2.1 所 示 。 


J c^ Java Class 


Y jave Link C++ Project with Gradle C3 Module 


Chile x © Android resource file 


团 copy Ctrl 四 Android resource directory 


ctl+shiftrc 目 File 
Copy as Plain Text F3 Package 
[3l Paste Ctri+y 国 C++ Class 
Find in Path... Ctrl+shift+p £ C/C++ Source File 
Replace in Path... Ctrl+Shift+R [ C/C++ Header File 
» bui Analyze » '® Image Asset 
Refactor , '® Vector Asset 
Adn Een , E Singleton 
Show mage Thumbnails — Ctri«Shift«T Edit File Templates... 
i Reformat Code Ctrl*Alt+L '® AIDL 
Optimize Imports Ctrl+Alt+O j '& Gallery... 
Local History , 'Ħ® Android Auto ^ £9 Always On Wear Activity (Re 
© Synchronize 'app' '& Folder ^ zz Android TV Activity (Require 
'«$& Fragment 
iĝ Google + g Blank Wear Activity (Require 
'* Other * — Bottom Navigation Activity 


Show in Explorer 
Directory Path Ctrl Alt«F12 


82.1 
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依然 选择 Basic Activity 模板 ， 因 为 它 符 合 Material Design， 出 现 一 个 对 话 框 ， 如 图 8.2.2 
所 示 。 


Configure Activity 


人 Android Studio 


Creates a new basic activity with an app bar. 


Activity Name: | TestFragmentActivity 
Layout Name: | activity test fragment 
Title: | TestFragmentActivity 


[_] Launcher Activity 
Use a Fragment 


e Hierarchical Parent: | D : 


Package name: | niuedu.com,andfirststep 


Target Source Set: | main 


The hierarchical parent activity, used to provide a default implementation for the 'Up' button 


| caca rnin 
图 8.2.2 


注意 必须 选中 “Use a Fragment” M, 点 Finish 后 ,Android Studio 目 动 为 我 们 创建 此 Activity 
相关 的 文件 ， 如 图 8.2.3 所 示 。 


Y Dapp 
> © manifests 
v Djava 
y Ñ niuedu.com.andfirststep 
@ ù MainActivity 
(€ ù RegisterActivity 
© ù| TestFragmentActivity | 
© à| TestFragmentActivityFragment 
» F1niuedu.com.andfirststep (androidTest) 
> [£jniuedu.com.andfirststep (test) 
" [ares 
» © drawable 
v © layout 
E} activity main.xml 
kè activity register.xml 
kè activity test fragment.xml 
=> content register.xml 


= content test fragment.xm 
idi grid layout test.xml 
kà linear layout login.xml 
kà linear layout test.xml 
> E menu 


8.2.3 


可 以 看 到 比 之 前 的 Activity 多 了 一 个 类 TestFragmentActivityFragment, X. € f —^r layout 
文件 fragment test fragment.xml 。 

activity test fragment.xml 是 定义 Acitivty 界面 的 外 围 框架 的 文件 ， 存 放 Activity 内 容 部 分 的 
layout 文件 是 content test fragment.xml (被 activity test fragment.xml 所 include) ， 其 内 容 是 : 
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<fragment xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:id-"Q-cid/fragment" 


android:name-"niuedu.com.andfirststep.TestFragmentActivityFragment" 

android:layout width-"match parent" 

android:layout height-"match parent" 

app:layout behavior-"8string/appbar scrolling view behavior" 

tools:layout-"8layout/fragment test fragment" /> 

此 文件 只 有 一 个 元 素 <fragment>， 它 定义 了 一 个 Fragment, «fragment^i£ f£ (15$ T 7658. 
但 预览 时 是 能 看 到 Fragment 的 内 容 的 ， 因 为 “tools:layout” 的 存在 ， 其 值 指 向 了 另 一 个 layout 
文件 : fragment test fragment.xml， 这 个 文件 定义 了 Fragment 的 内 容 。 注 意 前 级 “tools” 所 修 
饰 的 属性 只 在 设计 时 起 作用 ， 在 运行 时 它 并 不 起 作用 ， 运 行 时 是 用 代码 来 天 联 Fragment 与 其 
layout 文件 的 。 见 Fragment 类 的 定义 : 


public class TestFragmentActivityFragment extends Fragment { 

public TestFragmentActivityFragment() { 

} 

QOverride 

public View onCreateView(LayoutInflater inflater, ViewGroup container, 

Bundle savedInstanceState) { 
/ / REK Fragment 5 layout 文件 
return inflater.inflate(R.layout.fragment test fragment, container, 

false); 


) 


} 


这 是 Android Studio 上 自动 为 我 们 产生 的 代码 , 方法 onCreateView0 是 在 显示 Fragment 之 前 
调用 的 ， 应 在 此 方法 中 创建 Fragment 的 界面 ， 如 果 要 从 layout 文件 中 加 载 界面 ， 必 须 使 用 传 
入 的 参数 : “inflater” 的 方法 inflater0， 此 方法 的 第 一 个 参数 就 是 layout 资源 文件 的 id。 就 是 
这 一 句 在 运行 时 把 Fragment 与 其 layout 定义 文件 关联 到 一 起 。 

再 看 一 下 TestFragmentActivity 25: 


public class TestFragmentActivity extends AppCompatActivity í( 
QOverride 
protected void onCreate (Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity test fragment); 
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
setSupportActionBar (toolbar); 


FloatingActionButton fab = (FloatingActionButton) 
findViewById (R.id.fab); 
fab.setOnClickListener (new View.OnClickListener() { 
QOverride 


public void onClick(View view) { 
Snackbar.make(view, "Replace with your own action", 
Snackbar.LENGTH LONG) 
.SetAction("Action", null).show(); 


) 
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与 不 包含 Fragment 的 Activity 类 相 比 也 没有 什么 特殊 的 地 方 。 其 layout. 资源 是 
activity test fragmentxml ， 这 个 文件 中 include 了 content test fragment.xml ， 所 以 
setContentView() 执行 时 ， 会 创建 出 Fragment, Mj Fragment 在 创建 时 又 关联 了 
fragment test fraement.xml， 于 是 你 就 在 Activity 的 内 容 区 看 到 了 fragment test fragment.xml 
里 面 定义 的 内 容 。 

Fragment 所 占据 整个 内 容 区 ， 此 时 Fragment 就 相当 于 一 个 页 面 ， 切 换 页 面 只 需 蔡 换 
Fragment 即 可 .ActionBar 属于 Activity; 不 属于 Fragment, 所 以 各 Fragment 共享 一 个 ActionBar， 
我 们 可 以 在 切换 Fragment 时 改变 ActionBar 上 的 内 容 ， 这 样 就 更 像 Activity 切换 了 。 下 面 我 们 
就 把 登录 页 面 和 注册 页 面 改 用 Fragment 来 实现 。 


改造 登录 页 面 
我 们 将 把 MainActivity 作为 各 Fragment 的 宿主 。 


8.3.1 添加 layout 文件 


当前 的 MainActivity 只 有 一 个 layout 文件 〈activity main. xmD 来 定义 它 的 内 容 ， 当 我 要 
使 用 Fragment 的 时 候 ， 由 于 Fragment 占据 了 Activity 的 内 容 区 ， 所 以 Activity 的 内 容 应 移 到 
Fragment 的 layout 中 ， 所 以 我 为 Fragment 新 建 一 个 layout 文件 ， 然 后 把 activity main.xml 的 
内 容 复制 到 新 文件 中 。 创 建新 layout 资源 文件 的 过 程 如 下 : 

在 res 组 上 点 出 右键 菜单 ， 


(€ nh TestFragmentActivity 
E New 
Link C++ Project with Gradle © Android resource directory 
E] File 
M Directory 


Ctrl X 
Ctrl+C 
Copy Path Ctrl+Shift+c |5] C++ Class 
Copy as Plain Text E C/C++ Source File 
Copy Reference Ctrl+Alt+Shift+c Œ C/C++ Header File 
e ec cfi Paste Ctrl+V M Image Asset 
© buid Fd Usages Ar] 9 Vector Asset 
(buic Find in Path... Ctri«Shift«F [i] Singleton 
[à grac Replace in Path... Ctrl+Shift+R Edit File Templates... 
E] proc Analyze ) & AIDL 


[aii grac Refactor » $$ Activity 


~ . 
—— Add to Favorites » $& Android Auto 
We | A 


& Folder 
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出 现 New resource file 对 话 框 ， 如 图 8.3.1.2 所 示 。 


f^ New Resource File x 


File name: | fragment login - f 11 
Resource type: | Layout 4 B 
Root element: |LinearLayout 

Source set: | main M 
Directory name: | layout 

Available qualifiers: Chosen qualifiers: 

$3 Country Code 

© Network Code | > > "Y 

@ Locale Nothing to show 


im Layout Direction | di ] 
2» Smallest Screen Width 
= Screen Width 


ES | Cancel | Help | 
8.3.1.2 


在 File name 字段 输入 “fragment login" , 在 Resource type 字符 选择 Layout， 其 余 不 用 动 。 
至 于 Root element GRWR) 字段 中 是 什么 不 重要 ， 因 为 我 们 后 面 要 重 定义 layout 中 的 内 容 ， 
点 OK， 会 在 res/layout/ 下 创建 出 fragment login.xml 文件 。 


8.3.2 改变 layout 文件 的 内 容 


新 layout 文件 创建 后 ， 将 activity main.xml 的 内 容 全 部 复制 ， 粘 贴 到 fragment login.xml 
中 替换 现 有 内 容 。 然 后 把 activity main.xml 的 内 容 改 成 这 样 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«FrameLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 


android:layout height-"match parent" 
android:id-"8-*id/fragment container" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


«/FrameLayout» 


现在 只 有 一 个 FrameLayout 而 已 ， 并 且 这 个 layout 还 充满 了 整个 内 容 区 。FrameLayout 有 
什么 特点 来 ? 它 的 儿子 们 只 能 位 于 左上 角 ， 它 适合 多 个 View 切换 的 场景 。 我 们 可 以 把 一 个 
Fragment WRA $jix^^ FragmeLayout 中 (实质 上 是 运行 时 把 Fragment 的 根 View 设置 成 了 
FrameLayout 的 儿子 ) 。 

当 把 新 的 Fragment BE £| FrameLayout 中 而 把 旧 的 删除 时 ， 则 完成 了 Fragment 的 切换 。 

注意 这 个 FrameLayout 有 id: fragment layout， 因 为 我 们 需要 通过 代码 把 Fragment 放 到 它 
里 面 ， 需 要 操作 它 ， 所 以 它 必 须 有 id。 
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8.3.3 添加 Fragment 类 


有 了 Fragment 的 layout 文件 , 还 要 添加 Fragment 类 , 在 Fragment 类 中 关联 layout 文件 来 
创建 界面 。 我 把 Fragment 类 放 在 与 Activity 相同 的 包 下 吧 。 在 包 上 点 出 右键 菜单 , 选择 “New” 
一 “Java Class”， 如 图 8.3.3.1 所 示 。 


$i Android - | 四 activity test fragment.xml x | © MainActivityjava x | (© TestFrag 
* Caapp 
> E manifests <?xml version="1.0" encodings"utf-8"?» 


Link C++ Project with Grade 5 Android resource file 
€» TestFragment 26 Cut Ctrl:>X e Android resource directory 
eu TestFragmenti; e Copy Ctrl+C E] File 

* E niuedu.com.andfirst — copy Path ctryshifttC © Package 
$?* Exampleinstru Copy as Plain Tent 5 C++ Class 
b PRERE Copy Reference Ctii«AlteShitt-c É C/C++ Source File 
X SEND Pu KR Di Paste Ctrl+y D C/C++ Header File 
» E3drawable Find Usages Alt«rz '® Image Asset 
Y © layout Find in Path... Ctrl+Shift+F '& Vector Asset 
E activity mainxm| Replace in Path... Ctrl+Sshift:R E Singleton 
kð activity register.x , ile 
8.3.3.1 
Z » — » l a 4 PR 
弹出 创建 类 的 对 话 框 ， 像 下 图 (如 图 8.3.3.2 所 示 ) 这 样 填写 内 容 。 
f Create New Class X 
Name: LoginFragment | 
Kind: (€ Class M 
Superclass: | android.support.v4.app.Fragment | 
Interface(s): | 
Package: niuedu.com.andfirststep| 
Visibility:  @ Public O Package Private 
Modifiers: — None ( ) Abstract ( ) Final 


[C] Show Select Overrides Dialog 


| Ok | Cancel Help . 


图 8.3.32 


点 OK, Fragment 类 被 创建 。 在 类 中 重 写 父 类 的 方法 onCreateView0， 在 此 方法 中 加 载 
fragment layout.xml 中 定义 的 界面 : 


public class LoginFragment extends Fragment { 
QGOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 


Bundle savedInstanceState) { 
return inflater.inflate(R.layout.fragment login, container, false); 
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Fragment 的 方法 onCreateView0 在 需要 创建 Fragment 的 界面 时 被 调用 ， 此 时 界面 并 没有 
被 显示 出 来 。 注 意 onCreateView0O 这 个 方法 返回 的 是 利用 Inflater 加 载 layout 文件 后 创建 的 控 
件 树 的 根 控件 ， 而 不 是 像 Activity 一 样 利用 setContentView0O 把 layout 资源 设置 成 自己 的 界面 。 
前 面 我 讲 过 ，Activity 中 放置 Fragment 时 ， 其 实 放 的 是 Fragment 的 根 控 件 ， 就 是 这 里 返回 的 
View。 我 们 在 Activity 中 准备 了 一 个 FrameLayout 来 放置 Fragment， 但 是 Fragment 不 会 自动 
把 自己 放 进 去 ， 需 要 写 代码 来 完成 。 

在 将 Fragment 放 入 Activity 之 前 ， 我 们 还 需要 完成 登录 页 面 的 业务 逻辑 ， 把 MainActivity 
中 与 登录 相关 的 代码 移 到 LoginFragment 中 即 可 , 首先 将 以 下 两 个 变量 移 到 LoginFragment 中 : 


EditText editTextName; 


EditText editTextPassword; 

再 将 MainActivity 的 onCreate () 方 法 中 以 下 代码 移 到 LoginFragdment "P: 
XC P E ARI ATIS 

editTextName = (EditText) findViewById (R. id. edztTextName) ; 

editTextPassword = (EditText) findViewById(R. id. editTextPassword) ; 


H id6S/HN dm ATSff 

editTextName = (EditText) findViewById (R. id. edztTextName) ; 
ABTCES IE BILE IE 

editTextName. setHint (“请 输入 用 户 名 ”)- 


TC SI GR TRE 
Button buttonLogin = (Button) findViewByld(R. id. buttonLogin); 
BURS, MOIZ HKI click AI 
buttonLogin. setOnClickListener(new View.OnClickListener() { 
@Override 
public void onClick(View v) { 
Él/& Snackbar X/ R 
Snackbar snackbar = Snackbar. make(v, RAR T «^, 
Snackbar. LENGTH LONG) ; 
EZIN PEJN 
snackbar. show () ; 


H: 


CELL JER 
Button buttonRegister = (Button) findViewById(R. id. buttonRegister); 
buttonRegister. setOnClickListener(new View.OnClickListener() { 
GOÜverride 
public void onClick(View v) { 
TEMPE BEA TIT IH E 
JÆ Intent, HAZAAHI Activity 
Intent intent - new Intent (MainActivity. this, RegisterActivity. class); 
JFZ Activity, SETHXC HB ELA Activity PTARÍBIBISETR, AET iE 
Z2 TS M TSKAd, dE— EE 
startActivityForResult (intent, REGISTER REQUEST CODD); 
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注意 啊 应 点 击 注册 按钮 的 处 理 代码 ,不 再 以 Activity 作为 注册 页 面 ， 而 是 Fragment， 所 以 
把 启动 RegisterActivity 的 代码 删 掉 ， 这 样 LoginFragment 的 onCreateView0 〇 方法 代码 如 下 : 


QOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
/ / WR Fragment HIK 


View v — inflater.inflate(R.layout.fragment login, container, false); 


// RH P EAE B MATEA 
editTextName = (EditText) v.findViewById(R.id.editTextName); 
editTextPassword = (EditText) v.findViewById (R.id.editTextPassword); 


/ / Hl id CSI P y A fef 

editTextName = (EditText) v.findViewById(R.id.editTextName); 
// MINER i EE EE 

editTextName.setHint ("请 输入 用 户 名 "); 


/ / TCI ER fé Ell 
Button buttonLogin = (Button) v.findViewById(R.id.buttonLogin); 
/ LS IAUFAS, ZK Click Hf 
buttonLogin.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
//fl/& Snackbar X/ 
Snackbar snackbar = Snackbar.make(v, "你 点 我 干 哈 ?",， 
Snackbar.LENGTH LONG); 
/ / BIEI 
snackbar.show(); 
} 
)); 


// TESIVEMTEEN, JTE 
Button buttonRegister - (Button) v.findViewById(R.id.buttonRegister); 
buttonRegister.setOnClickListener(new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
// REB CUMBRE TA TIT BIBLE 
} 
} ) 


return v; 


操作 控件 必须 在 控件 被 创建 完成 后 ， 就 是 在 inflate0 被 调用 之 后 。 获 取 界 面 中 某 控 件 ， 使 
用 v.findViewById(), v 是 界面 控件 树 的 根 ， 这 里 是 fragment login.xml 中 的 最 外 层 元 素 
ScrollView. 


再 来 看 MainActivity， 其 onCreate0 方 法 变 成 了 这 样 : 
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QOverride 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate (savedInstanceState); 


//A layout JUR X fE'PUEETOTEZEIS EAS Activity. 
setContentView(R.layout.activity main); 


// HK Action bar 

android.support.v/7.app.ActionBar actionBar = this.getSupportActionBar(); 
// BFE BBE 

actionBar .setDisplayHomeAsUpEnabled (true); 


你 还 需要 把 MainActivity 的 onActivityResult() 方法 删 掉 ， 因 为 我 们 不 再 启动 
RegisterActivity ， 所 以 也 不 需要 啊 应 Activity 返回 事件 了 。 现 在 把 MainActivity 的 
onOptionsItemSelected0 方 法 也 改 一 下 ， 最 终 MainActivity 类 的 代码 如 下 : 

public class MainActivity extends AppCompatActivity í 


static final String EXTRA KEY NAME = "name"; 
static final String EXTRA KEY PASSWORD — "password"; 


QOverride 
protected void onCreate (Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 


//M la yout ÀEUSXfÍfuZETAÁISÍtJFi B Activit yo 
setContentView(R.layout.activity main); 


// HK Action bar 
android.support.v/.app.ActionBar actionBar 
this.getSupportActionBar(); 


actionBar.setDisplayHomeAsUpEnabled (true); 


QOverride 
public boolean onOptionsItemSelected (MenuItem item) 
int id = item.getItemId(); 
if (id == android.R.id.home) { 
// f Action bar LEBIR WA A 162€ flt 
return true; 


return super.onOptionsItemSelected (item); 


MainActivity 中 己 没 有 了 登录 逻辑 代码 。 现 在 运行 的 话 ， 只 看 到 一 片 空 白 ， 因 为 它 的 内 容 
区 只 是 一 个 空 的 FrameLayout， 下 面 就 把 LoginFragment 放 到 这 个 FrameLayout "P. 
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8.3.4 将 Fragment 放 到 Activity 中 


我 们 需要 在 界面 显示 之 前 就 把 Fragment 放 到 Activity 中 ,所 以 在 MainActivity 的 onCreate() 
中 加 入 以 下 代码 : 


// 4458 — f Fragment (MER Fragment) MA Activity F 
FragmentManager fragmentManager = getSupportFragmentManager (); 
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); 


LoginFragment fragment = new LoginFragment (); 
fragmentTransaction.add(R.id.fragment container, fragment); 
fragmentTransaction.commit (); 


这 段 代 码 首 先 新 建 了 一 个 Fragment 的 实例 ,这 里 要 十 分 注意 了 ,与 Activity 不 同 , Fragment 
是 可 以 被 new 出 来 的 , 那么 它 的 实例 我 们 也 可 以 保存 下 来 ,只 要 对 这 个 Fragment 的 引用 存在 ， 
它 就 不 会 被 销毁 ， 所 以 我 们 可 以 控制 Fragment 的 生死 ! 

之 后 又 获取 了 Fragment 管理 器 ， 通 过 管理 器 开始 了 一 个 事务 ， 然 后 通过 事务 将 Fragment 
加 入 到 MainActivity 中 指定 的 容器 控件 CFrameLayout) 中 ， 最 后 提交 事务 。 所 有 对 Fragment 
的 添加 、 删 除 、 蔡 换 等 操作 必须 放 在 事务 中 。 现 在 MainActivity 的 onCreate0 方 法 的 代码 如 下 : 

GOverride 


protected void onCreate (Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 


//M layout EÜRX fF TISfE IE BÉ Activity. 
setContentView(R.layout.activity main); 


//3*JÀX Action bar 

android.support.v/.app.ActionBar actionBar = this.getSupportActionBar(); 
/ / ME Iz ZAR [n] E] 

actionBar.setDisplayHomeAsUpEnabled (true); 


//4& 98 —f Fragment (MER Fragment) 加 入 Activity F 

FragmentManager fragmentManager - getSupportFragmentManager(); 

FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 

LoginFragment fragment = new LoginFragment (); 

fragmentTransaction.add(R.id.fragment container, fragment); 

fragmentTransaction.commit (); 


运行 一 下 App， 是 不 是 登录 页 面 又 出 现 了 ? 但 现在 点 注册 按钮 不 会 出 现 注 册页 面 ， 因 为 我 
们 还 需要 创建 一 个 注册 Fragment。 


8.3.5 创建 注册 Fragment 


这 回 创建 Fragment 的 方式 与 LoginFragment 不 同 , 这 次 我 们 借助 Android Studio 提供 的 工 
有 具 把 Fragment 类 和 它 对 应 的 layout 文件 一 起 创建 出 来 。 过 程 如 图 8.3.5.1 所 示 。 
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> Dja LinkC++ Project with Gradle 


> Dare 6 Cut 
v e Gradl m [i py 
© bL Copy Path 


Copy as Plain Text 


Find in Path... 
Replace in Path... 
Analyze 
Refactor 

Add to Favorites 


Ctrl «X 
Clrl «€ 


Ctil* Shift «C 


Ctrl-V 


Ctrl Shift«F 
Ctrl+Shift+R 


D3 Module 


”网 Android resource file 
© Android resource directory 


E File 
[3 Package 
& C++ Class 
E C/C++ Source File 
[4 C/C++ Header File 
» '& Image Asset 
; 'W Vector Asset 
, i] Singleton 


第 8 章 Fragment 


© 去 | 亲 - I fragment loginxml x © LoginFragmentjava x 


pport.v7.app.AppCompatAct 
ew.MenuItem; 


Activity extends AppCompa 
String EXTRA KEY NAME - " 
String EXTRA KEY PASSWORD 


d oncreate(Bundle savedIn 
reate(savedInstanceState) 


Show Image Thumbnails — Ctri«Shift«T Edit File Templates... 


Reformat Code Ctrl+Alt+L 'W AIDL "ion bar 
Optimize Imports Ctri+Alt+0 '® Activity * upport.v7.app.ActionBar al 
, ' Android Auto PES 

iĝ Folder » .setDisplayHomeAsUpEnable( 

Fragment > Fragment (Blank) 

iĝ Google » L} Fragment (list) 

'W Other » Li, Fragment (with a +1 button) 
@ Compare With... Ctrl+D i$ Service » [k Modal Bottom Sheet 


Local History 
G5 Synchronize 'app' 
Show in Explorer 
Directory Path Ctrl+Alt+F12 


8.3.5.1 


在 app 组 上 点 出 右键 菜单 ,选择 New Fragment Fragment(Blank), 我 们 要 创建 一 个 Blank 
(CFA) Fragment。 出 现 新 建 组 件 对 话 框 ， 如 图 8.3.5.2 所 示 。 


Creates a blank fragment that is compatible back to API level 4. 


Fragment Name: | RegisterFragment 


tr Create layout XML? 


Fragment Layout Name: | fragment register 


^ ""mb» Include fragment factory methods? 
"ww. |) Include interface callbacks? 


8.3.52 


Fragment Name 字段 填写 RegisterFragment, 4^ AX “Create layout XML ”被 选中 ， 而 
“include fragment factory methods" fil “include interface callbacks” 不 被 选中 ， 点 Finish 按钮 。 
Gradle 经 过 一 番 努 力 ， 为 我 们 添加 了 两 个 文件 ， 一 是 RegisterFragment 类 ， 二 是 其 layout 文件 
fragment register.xml. 
由 于 此 Fragment 是 用 来 代 蔡 RegisterActivity 的 ,所 以 我 们 可 以 把 RegisterActivity 的 layout 
文件 content register.xml 的 内 容 全 部 复制 到 fragment register.xml 中 ， 之 后 要 改 一 个 地 方 ， 把 
这 一 人 句 : 
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tools:context-"niuedu.com.andfirststep.RegisterActivity" 


tools:context-"niuedu.com.andfirststep.RegisterFragment" 


还 记得 前 面 说 过 ，tools 前 级 修饰 的 属性 只 在 设计 时 起 作用 ， 运 行 时 不 起 作用 ， 所 以 这 里 
改 不 改 都 不 影响 运行 ， 但 把 它 搞 对 了 ， 可 以 为 界面 设计 器 提供 一 些 帮助 。 

还 要 把 这 一 句 删 掉 : tools:showIn="(@layout/activity_register"， 它 表示 这 个 layout 显示 在 哪 
个 Activity 中 ， 因 为 它 要 显示 在 Fragment 中 ， 所 以 不 需要 这 一 名 了 。 看 一 下 RegisterFragment 
类 的 内 容 吧 : 


public class RegisterFragment extends Fragment { 
public RegisterFragment() { 


// Required empty public constructor 


QGOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
// Inflate the layout for this fragment 
return inflater.inflate(R.layout.fragment register, container, false); 


很 简单 。 注 意 在 onCreateView0 方 法 中 ， 己 经 把 layout 文件 与 此 Fragment 进行 了 关联 。 
下 一 步 我 们 把 RegisterFragment 显示 出 来 看 一 看 。 


8.3.6 显示 RegisterFragment 


依然 需要 在 登录 页 面 点 “注册 ”按钮 显示 注册 页 面 。 

现在 的 登录 页 面 是 LoginFragment， 代 码 也 移 到 这 此 类 中 ， 在 啊 应 注册 按钮 点 击 的 侦 听 器 
H, H| RegisterFragment 代替 LoginFragment 就 完成 了 页 面 切换 。LoginFragment 类 的 
onCreateView0 方 法 中 ， 对 注册 按钮 的 处 理 如 下 : 


// CSVEMIAEI, JER 
Button buttonRegister - (Button) v.findViewById(R.id.buttonRegister); 
buttonRegister.setOnClickListener (new View.OnClickListener() { 
QGOverride 
public void onClick(View v) { 


/ / EE BEA TP BE A 


FragmentManager fragmentManager = 
getActivity().getSupportFragmentManager (); 

FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 

RegisterFragment fragment = new RegisterFragment(); 

// B FrameLayout PRAHI Fragment 

fragmentTransaction.replace(R.id.fragment container, fragment); 
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/ / FF ETHICA E AB EE P, XIE RI DUE AJIB SERT A SI [n] E —-f* PUIET 
fragmentTransaction.addToBackStack ("login"); 


fragmentTransaction.commit (); 


现在 可 以 运行 App 了 ， 点 注册 按钮 是 不 是 进入 了 注册 页 面 ? 按 下 后 退 键 是 不 是 回 到 了 有 登 
录 页 面 ? 但 是 ， 仪 通过 按 返 回 键 回 到 登录 页 和 面 并 不 能 满足 我 们 ， 我 们 还 想 通 过 点 AppBar 上 的 
返回 图 标 返 回 上 一 个 页 面 ， 这 是 下 一 节 要 讲 的 。 


8.3.7 ”通过 AppBar 控制 页 面 导 航 


首先 注意 ， 现 在 不 论 切 换 到 哪个 页 面 ，Activity 并 没有 变 ，ActionBar 属于 Activity， 所 以 
ActionBar 是 同一 个 。 还 记得 是 哪个 方法 响应 ActionBar 上 返回 图 标点 击 事件 吗 ? 是 Activity 的 
onOptionsItemSelected0 ,在 其 中 啊 应 android.R.id.home 菜单 项 即 可 。 要 想 回 到 上 一 个 Fragment, 
我 们 只 需要 把 当前 的 Fragment 从 后 退 栈 中 弹出 即 可 。 代 码 如 下 : 


QOverride 
public boolean onOptionsItemSelected(MenuItem item) { 
int id = item.getItemId(); 
if (id == android.R.id.home) { 
//H f Action bar FA 局 本 
FragmentManager fragmentManager = getSupportFragmentManager (); 


fragmentManager.popBacksStack () ; // M £f£'P 2 HI FÁI Fragment 
return true; 


) 


return super.onOptionsItemSelected (item); 


调用 了 方法 popBackStack()， 将 当前 的 Fragment 弹出 ， 就 回 到 了 上 一 个 Fragment. fH 
提 是 当初 页 面 切换 时 ， 调 用 了 方法 addToBackStack(). 


das 当 回 到 登录 页 面 时 ， 再 点 返回 图 标 ， 此 处 代码 依然 被 执行 ， 然 而 由 于 加 入 登录 Fragment 


时 并 没有 调用 方法 popBackStackO， 所 以 此 处 代码 虽 被 执行 ， 但 不 起 作用 。 


8.3.8 实现 RegisterFragment 的 逻辑 


PR RegisterActivity 中 的 逻辑 一 样 ， 点 Cancel 按钮 时 ， 忽 略 用 户 的 输入 ， 直 接 回 到 登录 页 
面 ， 点 OK 按钮 时 ， 执 行 注 册 逻 辑 〈 以 后 实现 ) ， 然 后 返回 登录 页 面 ， 并 且 在 登录 页 面 中 显示 
刚 注 册 的 用 户 名 和 密码 。 

在 RegisterFragment 类 的 方法 中 添加 对 Cancel 按钮 的 啊 应 ， 代 人 码 如 下 : 


GOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
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Bundle savedInstanceState) { 
//M layout X ffFÉl/£ 77 K 
View view — inflater.inflate(R.layout.fragment register, container, false); 
/ IB PER 
Button buttonCancel = (Button) view.findViewById (R.id.buttonCancel); 
/ / BI BO HKI ex dr TT 


buttonCancel.setOnClickListener (new View.OnClickListener() { 


QGOverride 


public void onClick(View v) { 
// XA Activity 
FragmentManager fragmentManager = 
getActivity().getSupportFragmentManager (); 
fragmentManager.popBacksStack () ; //Mf£'P 2E Hl BÍ ET Fragment 
} 
)); 


return view; 


可 见 响 应 Cancel 按钮 的 代码 ， 与 点 击 ActionBar 上 的 返回 图 标的 处 理 方法 相同 。 
下 面 在 Cancel 按钮 的 处 理 代 码 的 最 后 面 ，“return view” 这 一 句 之 前 添加 对 OK 按钮 的 啊 


M: 


/ / IKfd OK f& £l 
Button buttonOk - (Button) view.findViewById(R.id.buttonOk); 
buttonOk.setOnClickListener(new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
// Ife ff 
EditText editTextName = (EditText) view.findViewById(R.id.editTextName); 
EditText editTextPassword - (EditText) 
view.findViewById (R.id.editTextPassword); 
EditText editTextEmail - (EditText) 
view.findViewById (R.id.editTextEmail); 
EditText editTextPhone = (EditText) 
view.findViewById ((R.id.editTextPhone); 
EditText editTextAddress - (EditText) 
view.findViewById (R.id.editTextAddress); 
RadioGroup radioGroup = (RadioGroup) view.findViewById (R.id.radioGroup); 


/ / BRIE P HIRIE 


String name = editTextName.getText ().toString(); 

String password = editTextPassword.getText ().toString(); 

String email = editTextEmail.getText().toString(); 

String phone = editTextPhone.getText().toString(); 

String address = editTextAddress.getText ().toString(); 

boolean sex = false; //ĦH, RII true CRA, false RZ ANAL. 
/ / BRERA PRE P HIIZEHI ID 

int checkRadioId = radioGroup.getCheckedRadioButtonId(); 

// AX f id A TÍUE ZI mn IEBHIBHI id. WIE sex EX true 
if(checkRadioId == R.id.radioButtonMale)( 
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Sex = true; 


} 


// TEÀB 
//TODO: MATIT ARR AEST EEEH CE 


/ EMTEA MAF BIBUEIFS)Activity P-e 
MainActivity activity = (MainActivity) getActivity(); 
if (activity != null){ 

activity.userName = name; 

activity.password = password; 


} 


// [EI E —f TCI 
FragmentManager fragmentManager - 
getActivity().getSupportFragmentManager(); 
fragmentManager.popBackStack () ; // Mf£'P 2 Ui BI Fragment 
)); | 
啊 应 代码 中 ， 前 面部 分 跟 RegisterAcitivity 中 相同 ， 取 得 控件 ， 取 得 用 户 输入 的 值 ， 进 行 
注册 。 然 而 ， 注 册 完 成 后 的 处 理 就 不 一 样 了 ， 因 为 此 时 不 能 再 设置 Activity 的 返回 数据 了 。 但 
怎样 在 一 个 Fragment 关闭 时 把 数据 传 给 男 一 个 Fragment 呢 ? 如 果 不 考 虑 Fragment 与 Activity 
之 加 的 低 看 合 问 题 的 话 就 很 简单 :在 RegisterFragment 关闭 之 前 将 数据 保存 到 它 所 在 的 Activity 
(也 就 是 MainActivity) 中 ， 然 后 在 LoginFragment 被 在 显示 之 前 从 MainActivity 取得 数据 ， 
设置 到 相应 的 控件 中 即 可 。 可 以 看 到 代码 中 ， 我 们 取得 了 Fragment 所 在 的 MainActivity 的 实 
例 ， 然 后 把 用 户 名 和 密码 设置 给 了 它 的 两 个 变量 userName 和 password， 所 以 我 们 要 在 
MainActivity 类 中 添加 两 个 实例 变量 〈 非 静态 变量 ) : 
//tRIFBPEMHI AAE A 


String userName; 


String password; 


可 能 有 读者 要 问 了 ， 为 啥 不 直接 把 用 户 名 和 密码 赋 给 LoginFragment J£? 你 真 想 那样 做 ， 
也 可 以 ， 因 为 虽然 现在 MainActivity 中 包含 的 是 RegisterFragment， 但 是 LoginFragment 并 没 
A ^U8U8 , fH f i; 3E E MainActivity 中 保存 下 对 LoginFragment 的 引用 , 才能 在 RegisterFragment 
中 访问 它 。 

保存 用 户 名 和 密码 的 值 完 成 了 , 那 如 何在 LoginFragment 中 将 保存 的 用 户 名 和 密码 读 出 来 
呢 ? 


8.3.9 LoginFragment 中 读 出 用 户 名 和 密码 


当 返 回 LoginFragment 时 , 会 重新 创建 Fragment 的 界面 , 会 调用 它 的 方法 onCreateView0， 
我 们 可 以 在 此 方法 中 , 把 MainActivity 的 userName 和 password 的 值 赋 给 相应 控件 , 如 下 所 示 。 


// Hl id CELA fef 
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editTextName = (EditText) v.findViewById(R.id.editTextName); 
// ØC i E E HIRET 
editTextName .setHint (" 请 输入 用 户 名 ") ; 


/ / RAF EMEGE, REII 
MainActivity activity = (MainActivity) getActivity(); 
if (activity !- null) { 
if(activity.userName != null) { 
editTextName.setText (activity.userName); 
} 
if(activity.password != null)í 
editTextPassword.setText (activity.password); 


) 


EERE PRIIT T JAN, su RIP AREE nul, EAS PETERE, XXRESUDRUE B 
一 次 显示 LoginFragment 时 ， 用 户 名 和 密码 输入 控件 为 空 ， 而 从 RegisterFragment 返回 时 ， 用 
户 名 和 密码 输入 控件 就 有 值 了 。 


8.3.10 Fragment 的 生命 周期 


生命 周期 指 的 是 一 个 对 象 从 创建 到 销毁 过 程 中 经 历 的 不 同 的 阶段 ， 每 个 阶段 有 不 同 的 状 
态 。 为 了 在 进入 每 个 阶段 后 能 执行 一 些 我 们 自 定义 的 逻辑 ， 父 类 中 都 提供 了 回调 方法 供 我 们 
Override， 这 些 回 调 方法 叫 作 生命 周期 方法 ， 之 所 以 说 它们 是 回调 ， 因 为 它们 是 由 我 们 实现 ， 
但 不 被 我 们 调用 ， 而 是 被 系统 调用 。 

当 一 个 Fragment 被 添加 到 Activity 时 , 要 调用 哪些 生命 周期 方法 呢 ? E LoginFragment 为 例 ， 
在 它 被 添加 到 Activity 时 ， 依 次 执行 这 几 个 回调 方法 : onAttach0O 一 onCreate0 一 onCreateView0。 
onAttachO 表 示 Fragment 被 附加 到 了 Activity 上 ，onCreate0 表 示 Fragment 被 创建 完成 ， 
onCreateView() KIR Æ 8i Fragment 的 界面 ,与 Activity 比较 起 来 ,值得 关注 的 差别 就 是 :Activity 
的 onCreate0 中 需要 加 载 界 面 ， 而 Fragment 必须 在 onCreateView0O 中 加 载 界 面 。 

在 Fragment 切换 过 程 中 会 执行 哪些 生命 周期 方法 呢 ? 在 RegisterFragment $F Hk 
LoginFragment 的 过 程 中 ， 只 执行 了 LoginFragment 的 onDestroyView(), EI LoginFragment 的 
界面 被 销毁 掉 了 。 当 从 RegisterFragment 返回 到 LoginFragment 时 ，LoginFragment 的 
onCreateViewO 被 重新 执行 ， 于 是 其 界面 被 重新 创建 。 

再 看 一 下 Fragment 的 销毁 过 程 , 拿 RegisterFragment 来 说 , 当 从 它 返 回 LoginFragment 时 , 
会 先 执行 它 的 onDestroyViewO， 再 执行 onDestroy0， 再 执行 onDetachO0， 然 后 被 销毁 了 。 注 
意 ， 从 LoginFragment 切换 到 RegisterFragment 时 ， 我 们 将 这 个 替换 过 程 加 入 到 了 后 退 栈 中 ， 
于 是 LoginFragment 需要 保持 在 内 存 中 ， 准 备 随 时 返回 到 它 的 页 面 ， 所 以 LoginFragment 并 没 
有 与 Activity Detach 。 

因为 LoginFragment 的 onCreateView0 在 界面 切换 时 一 定 会 被 执行 ， 所 以 我 们 上 一 节选 择 
在 此 方法 中 加 载 新 注册 的 用 户 名 和 密码 。 

好 了 ， 运行 一 下 试 试 。 进 入 登录 页 面 后 ， 点 “注册 ”进入 注册 页 面 ， 在 注册 页 面 输入 用 户 
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名 和 密码 ,点 OK 按钮 ， 回 到 登录 页 面 。 此 时 应 该 在 登录 页 面 的 用 户 名 和 密码 控件 中 显示 刚 注 
册 的 用 户 名 和 密码 。 但 是 …… 可 能 结果 让 你 震 恢 , 注册 的 用 户 名 和 密码 并 没有 显示 出 来 ! 天 啊 ! 
我 们 错 在 哪里 ? 好 像 完 全 没 错 啊 ! 这 么 诡异 的 问题 ， 到 底 怎 么 引起 的 呢 ?” 下 节 分 解 ! 


8.3.11 Fragment 状态 保存 与 恢复 
Fragment 生命 周期 的 回调 函数 还 有 好 多 没 讲 。 现 在 再 讲 两 个 方法 : 


public void onSaveInstanceState (Bundle outState); 

确切 地 说 这 两 个 方法 不 属于 生命 周期 回调 方法 ， 但 它们 的 确 又 参与 到 了 生命 周期 的 过 程 
中 。onViewStateRestored0 在 onCreateView0 之 后 被 调用 ， 其 作用 是 给 你 个 机 会 恢复 界面 销毁 
前 控件 的 内 容 〈 比 如 文本 输入 控件 的 内 容 ) ; onSavelnstanceState() Œ Fragment 被 销毁 时 调用 ， 
用 于 保存 控件 中 的 内 容 到 硬盘 中 ， 它 们 两 个 相互 配合 ， 在 onSavelInstanceState0 中 保存 控件 的 
内 容 ， 然 后 在 onViewStateRestored0 中 赋 给 相应 的 控件 的 相应 属性 。 如 果 我 们 不 Override 这 两 
个 方法 ， 它 们 的 默认 实现 是 对 具有 id 的 控件 进行 内 容 的 记录 和 恢复 。 如 果 你 实现 了 目 定 义 控 
件 ， 可 能 就 需要 重 写 这 两 个 方法 以 保存 自 定义 数据 。 

注意 这 两 个 方法 的 调用 并 不 是 对 称 的 ， 每 次 调用 完 onCreateViewQ 之 后 ， 
onViewStateRestored() — E 44 i4] H] , 但 onSavelInstanceState() H A E Fragment 被 系统 杀 死 时 才 
被 调用 。 其 实 这 两 个 方法 在 Activity 中 也 有 ! 就 是 为 了 应 付 Activity 被 悄悄 杀 死 再 悄悄 复活 而 
设立 的 〈 让 用 户 感觉 不 到 界面 的 变化 ) 。 不 论 是 Activity， 还 是 Fragment， 只 要 没有 被 销毁 ， 
即使 界面 被 销毁 了 ,由 于 其 各 种 变量 依然 存在 ,重建 界面 时 可 以 直接 把 变量 的 值 赋 给 控件 ， 所 
以 不 用 保存 其 状态 。 但 一 旦 被 销毁 ， 重 新 创建 时 要 想 恢 复 之 前 的 界面 的 内 容 ， 必 须 在 销毁 前 就 
把 相关 内 容 保存 下 来 〈 保 存 到 硬盘 上 ) 。 

总 之 ， 由 于 Fragment 在 onCreateView0 之 后 必然 会 调用 onViewStateRestored0， 所 以 我 们 
在 onCreateView() 中 为 控件 所 赋 的 值 在 onViewStateRestored() FP 9z 48 m | » XX be 
LoginFragment 中 以 下 代码 不 起 作用 的 原因 : 


»7EBS D D E F T REGA 37 C77 de Le 


ILAP EREJET, MRE AM EIF 
MainActivity activity = (MainActivity) getActivity(); 
if(activity !- null) | 

if (activity.userName l= null) { 


editTextName.setText(activity.userName); 
} 
if (activity.password l= null) { 
editTextPassword.setText(activity.password); 
} 
} 


怎么 改进 呢 ? 很 简单 ， 重 写 onViewStateRestored()， 把 这 堆 代 码 移 到 onViewStateRestored() 
中 : 
QOverride 


public void onViewStateRestored(8Nullable Bundle savedInstanceState)(í 
super.onViewStateRestored(savedInstanceState); 
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/ / RAF EREIZ, MRA E 
MainActivity activity = (MainActivity) getActivity(); 
if (activity != null) { 
if (activity.userName != null) { 
editTextName.setText (activity.userName); 


} 
if (activity.password != null) { 
editTextPassword.setText(activity.password); 


8.3.12 总结 


现在 ， 已 经 把 登录 和 注册 功能 移 到 Fragment 中 了 ，MainActivity 的 角色 发 生 了 转变 , 成 了 

页 面容 嚣 ， 而 RegisterActivity 已 不 被 使 用 ， 删 除 之 。 同 时 MainActivity 中 的 常量 

“EXTRA KEY NAME” 和 “EXTRA KEY PASSWORD ”由 于 不 再 需要 在 Activity 之 间 传 递 

数据 而 无 用 ， 删 除 之 。 删 除 RegisterActivity 类 的 同时 ， 不 要 忘记 删 掉 它 关联 的 资源 ， 有 
activity register.xml 和 content register.xml， 还 有 values/strings.xml 中 的 这 一 条 : 


还 没完 ， 打开 AndroidMainifest.xml， 删 掉 此 元 素 : 


<activity 
android:name-".RegisterActivity" 
android:label-"8string/title activity register" 


android:theme-"Gstyle/AppTheme.NoActionBar" /> 


现在 ，MainActivity 的 代码 如 下 : 


public class MainActivity extends AppCompatActivity { 


/ I RIFE KAFR EAE 
String userName; 
String password; 


QOverride 
protected void onCreate (Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 


// A layout I&JR X fF PNIS IHH RHA Activity. 
setContentView(R.layout.activity main); 


// K Action bar 
android.support.v/7.app.ActionBar actionBar = 
this.getSupportActionBar(); 
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/ / AE ZA [PIE ES 
actionBar.setDisplayHomeAsUpEnabled (true); 


//14& 98 —f: Fragment (MER Fragment) JIA Activity F 

FragmentManager fragmentManager = getSupportFragmentManager(); 

FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 

LoginFragment fragment = new LoginFragment(); 

fragmentTransaction.add(R.id.fragment container, fragment); 


fragmentTransaction.commit (); 


QGOverride 
public boolean onOptionsItemSelected(MenuItem item) { 
int id = item.getItemId(); 
if (id == android.R.id.home) { 
//H f Action bar LHE BIRER 
FragmentManager fragmentManager = getSupportFragmentManager (); 
fragmentManager.popBackStack () ; // Mf£'P EHI ýJ Fragment 
return true; 


return super.onOptionsItemSelected (item); 


LoginFragment 的 代码 如 下 : 


public class LoginFragment extends Fragment { 
EditText editTextName; 
EditText editTextPassword; 


QOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
// lll Fragment HIFK 
View v = inflater.inflate(R.layout.fragment login, container, false); 


// BRAF E BUE A TS 
editTextName - (EditText) v.findViewById(R.id.editTextName); 
editTextPassword - (EditText) v.findViewById(R.id.editTextPassword); 


// Hl id T€ SAP di A fe fF 

editTextName = (EditText) v.findViewById(R.id.editTextName); 
// ANAR i E E E 

editTextName.setHint (" 请 输入 用 户 名 ") ; 


/ / CSV fa fl 

Button buttonLogin = (Button) v.findViewById(R.id.buttonLogin); 
// RUR, AKI Click Ap 
buttonLogin.setoOnClickListener (new View.OnClickListener() { 
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QOverride 
public void onClick(View v) { 
//fl/&& Snackbar X/ R 
Snackbar snackbar = Snackbar .make(v," 你 点 我 干 哈 ?" ， 
Snackbar.LENGTH LONG); 
/ / XE ZINÍEZIN 


snackbar.show(); 


)); 


// BEPREM, JE REA dr A T AS 
Button buttonRegister - (Button) v.findViewById(R.id.buttonRegister); 
buttonRegister.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
// HEB UREDIT ET LEE 
FragmentManager fragmentManager = 
getActivity().getSupportFragmentManager (); 
FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 
RegisterFragment fragment - new RegisterFragment (); 
//É f&fS FrameLayout PHRA fj Fragment 
fragmentTransaction.replace(R.id.fragment container, fragment); 
// EC UIIHACA ErABfETH, BIER UEA BREN ELI [n] E —f P ET 
fragmentTransaction.addToBackStack ("login"); 
fragmentTransaction.commit(); 


)); 


return v; 


QOverride 
public void onViewStateRestored(8Nullable Bundle savedInstanceState)( 


super.onViewStateRestored(savedInstanceState); 


/ URA E BIEIESS, MRAM I 
MainActivity activity - (MainActivity) getActivity(); 
if (activity !- null) { 
if (activity.userName != null) { 
editTextName.setText (activity.userName); 
} 
if (activity.password != null) { 
editTextPassword.setText (activity.password); 


RegisterFragment 代码 如 下 : 
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public class RegisterFragment extends Fragment | 


public RegisterFragment() { 
// Required empty public constructor 


QOverride 


public View onCreateView(LayoutInflater inflater, ViewGroup container, 


Bundle savedInstanceState) { 


// Inflate the layout for this fragment 
final View view = inflater.inflate(R.layout.fragment register, container, 


false); 


/ / RARR ZH 
Button buttonCancel = (Button) view.findViewById(R.id.buttonCancel); 
/ / TAE CERE en dr fa 


buttonCancel.setOnClickListener (new View.OnClickListener() { 


QOverride 
public void onClick(View v) { 


// X Bil Bf Activity 
FragmentManager fragmentManager = 


getActivity().getSupportFragmentManager (); 


)); 


fragmentManager.popBacksStack () ; // Mf£'P 2] HI 2 4 BI Fragment 


// fF OK ZEH 
Button buttonOk = (Button) view.findViewById(R.id.buttonok); 


buttonOk.setOnClickListener (new View.OnClickListener() { 


QOverride 
public void onClick(View v) { 


// BERGE HE 
EditText editTextName - (EditText) 


view.findViewById (R.id.editTextName); 


EditText editTextPassword - (EditText) 


view.findViewById(R.id.editTextPassword); 


EditText editTextEmail - (EditText) 


view.findViewById (R.id.editTextEmail); 


EditText editTextPhone - (EditText) 


view.findViewById (R.id.editTextPhone); 


EditText editTextAddress - (EditText) 


view.findViewById (R.id.editTextAddress); 


RadioGroup radioGroup = (RadioGroup) 


view.findViewById (R.id.radioGroup); 


// BRIE P HIRIE 

String name = editTextName.getText ().toString(); 

String password = editTextPassword.getText ().toString(); 

String email - editTextEmail.getText().toString(); 

String phone - editTextPhone.getText().toString(); 

String address - editTextAddress.getText ().toString(); 

boolean sex = false; ///Z5/ RIR true CRA, false ftx. BM yx. 
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// E UG Te EAR PRUE P HIIZEHHI ID 
int checkRadioId = radioGroup.getCheckedRadioButtonId(); 
// AU idscTfUoXZNildvsIUU id, WIE sex E77 true 
if(checkRadioId == R.id.radioButtonMale)( 

sex = true; 


} 


/ /十 n 
//TODO: AFIT ARR REST RER GEG 


/ IMTIR MAF EAMEREFA Activity Fe 
MainActivity activity = (MainActivity) getActivity(); 
if (activity != null){ 

activity.userName = name; 

activity.password = password; 


} 


// BIRLE —fs R IET 
FragmentManager fragmentManager = 
getActivity() .getSupportFragmentManager (); 
fragmentManager.popBacksStack () ; // Mf£'F. 2E HI T BI] Fragment 
) 
)); 


return view; 


我 们 经 党 看 到 某 些 App 的 主页 面 上 按 下 返回 键 时 会 出 现 对 话 框 , 询问 我 们 是 否 真 的 退出 。 
实现 这 个 功能 的 原理 很 简单 : 啊 应 返回 键 , 在 其 中 显示 对 话 框 ,对 话 杠 上 有 “退出 ”、“ 取 消 ” 
之 类 的 按钮 ， 点 “退出 ”时 finishO 当 前 Activity， 上 点 “取消 ”时 啥 也 不 做 。 问 题 是 ， 如 何 显示 
对 话 框 ? 答案 是 使 用 DialogFragment 25. 

首先 要 知道 DialogFragment 是 一 个 Fragment， 它 必须 依附 Activity 而 起 作用 。 要 使 用 它 ， 
必须 从 它 派 生 一 个 子 类 ， 在 子 类 中 重 写 onCreateDialog0 方 法 ， 在 此 方法 中 创建 真正 的 Dialog. 
实际 上 , DialogFragment 是 Dialog 的 一 个 容器 , 我们 看 到 的 对 话 框 , 是 Dialog 提供 的 , 而 Dialog 
通过 依附 在 Fragment 中 ， 可 以 自动 配合 Activity 的 生命 周期 。 下 面 就 创建 一 个 询问 是 否 退 出 
的 对 话 框 。 


8.4.4 创建 子 类 
首先 从 DialogFragment 派生 一 个 子 类 。 我 们 把 这 个 类 作为 MainActivity 的 内 部 类 吧 。 在 
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MainActivity 类 中 添加 以 下 代码 : 


public static class ExitDialogFragment extends DialogFragment { 

// I GKR E, AATF Æ Dialog X/5& JEUX [a] 

QGOverride 

public Dialog onCreateDialog(Bundle savedInstanceState) { 
// Use the Builder class for convenient dialog construction 
AlertDialog.Builder builder = new AlertDialog.Builder (getActivity()); 
/ / É|& X i EZ. Bf, RE E ERE BL EIE 
// REH IE TEINÉS TEILE 
builder.setMessage(R.string.exit or not) 


// REX tE PIEZA URIAK ZEE, IAAT OK, YES ŻA 


.setPositiveButton (R.string.ok, new 
DialogInterface.OnClickListener() { 
public void onClick(DialogInterface dialog, int id) { 
/ / AB SBM Activity 


getActivity().finish(); 
} 
)) 
/ / E BET TAE PEE TA IZH DUAE CERA, WATR ARHI 
.setNegativeButton(R.string.cancel, new 
DialogInterface.OnClickListener() { 
public void onClick(DialogInterface dialog, int id) { 
// HELP Y RY, fF A ETE 


}); 
/ / ÉI&E& XJ iB AE JEAR Inl 


return builder.create(); 


这 一 堆 代 码 定义 了 DialogFragment 的 子 类 ， 并 重 写 的 父 类 的 方法 onCreateDialog0， 在 此 
方法 中 创建 了 Dialog 的 一 个 子 类 AlertDialog 的 一 个 实例 并 返回 。 这 段 代 码 在 书写 时 ， 可 能 需 
要 import 多 个 类 ,注意 有 些 类 在 不 同 的 包 中 都 存在 ， 比 如 类 DialogFragment， 有 以 下 选择 ， 如 
图 8.4.1.1 所 示 。 


DialogFragment { 
/ Class to Import 


DialogFragment (android.support.v4.app) support-fragment-25. 
stanceState) { (€ ù DialogFragment (android.app) < Android API 25 Platform 
dialog constructron 


图 8.4.1.1 


注意 你 要 选 禹 有 “support” 的 包 。 因 为 我 们 使 用 的 Activity W support 库 中 的 ， 有 图 为 
证 ， 如 图 8.4.1.2 所 示 。 
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import android.support.v7.app.AppCompatActivity; 
import android.view.MenuItem; 


public class MainActivity extends AppCompatActivity [ 


8.4.1.[2 
有 反正 就 是 看 到 市 有 “support” 的 包 时 ， 就 选择 它 。 还 有 ，R.string.ok 和 R.string.cancel 两 
个 彰 量 ， 代 表 的 是 字符 串 资 源 ， 你 需要 目 己 添加 这 两 个 字符 串 〈 快 捷 键 Alt+enter) 。 你 可 能 
还 注意 到 这 个 类 是 static 的 ， 这 是 因为 Fragment 的 子 类 作为 内 部 类 时 ， 必 须 是 static 类 。 


8.4.2 显示 对 话 框 
要 显示 对 话 框 很 简单 : 创建 DialogFragment 对 象 ， 调 用 其 方法 showO， 代 码 如 下 : 


问题 是 在 哪里 执行 这 段 代 码 。 我 们 希望 在 主页 面 中 点 返回 键 时 执行 这 段 代 码 ， 需 要 啊 应 返 
回 键 ， 我 们 已 经 在 MainActivity 中 啊 应 了 人 返回 键 ， 现 在 的 逻辑 是 从 后 退 栈 中 弹出 上 一 个 
Fragment， 当 然 这 只 有 处 于 RegisterFragment 页 面 时 起 作用 ， 在 LoginFragment 页 面 时 不 起 作 
用 。 在 处 于 LoginFragment 页 面 时 ， 应 显示 出 对 话 框 。 我 们 首先 要 确定 当前 页 面 是 不 是 
LoginFragment， 我 们 可 以 为 MainActivity 添加 一 个 字段 ， 在 页 和 面 切换 时 用 它 记 录 下 当前 是 
个 页 面 处 于 显示 状态 (在 Fragment 的 onCreateView0 方 法 中 设置 这 个 字段 的 值 ) ， 这 种 方法 
可 以 做 到 万 无 一 失 , 但 是 封装 性 不 佳 。 但 还 有 更 简单 一 点 的 做 法 : 查看 到 前 后 退 栈 中 是 否 有 条 
目 ， 如 果 没 有 ， 说 明 退 回 到 了 最 初 的 页 面 (LoginFragment) 了 ， 就 应 该 显示 询问 是 否 退 出 的 
对 话 框 了 ， 就 用 这 个 办 法 吧 ， 修 改 MainActivity 的 onOptionsItemSelected0 方 法 如 下 : 

QOverride 
public boolean onOptionsItemSelected(MenuItem item) { 
int id = item.getItemId(); 
if (id == android.R.id.home) { 
//H f Action bar EHI BRIER 
FragmentManager fragmentManager = A a S 
Qui E E ere E E == 0){ 


// UI ERAB ERAS Y. MAB T XR BU PAID, IIB TE JA] TA TEE 
ExitDialogFragment dialogFragment = new ExitDialogFragment (); 


dialogFragment.show(getSupportFragmentManager(), "exit"); 
}else { 

/ / MITER FÉ HI S HIE Fragment 

fragmentManager.popBackStack(); 


} 
// &NBETT BE H A AU "true 
return true; 

} 


return super.onOptionsItemSelected (item); 
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现在 运行 App， 在 登录 页 面 点 AppBar 上 的 返回 图 标 ， 是 不 是 出 现 了 对 话 框 ?如 图 8.42.1 


你 真 的 要 退出 吗 ? 


CANCFI OK 


8.4.2.1 


但 是 ， 当 你 按 返 回 键 时 ， 却 不 会 出 现 此 对 话 框 , 而 是 直接 把 Activity 隐藏 了 。 这 是 个 问题 ， 
Arf UE PA MEE. 


8.4.3 MMR [e] $8 


对 按键 的 啊 应 ， 是 在 Activity 中 做 的 。Activty 类 中 已 实现 了 方法 onKeyDownO， 对 键 的 
按 下 进行 了 默认 处 理 。 我们 要 啊 应 按键 实现 目 己 的 处 理 ， 就 需要 重 写 此 方法 ,在 此 方法 中 判断 
当前 页 面 是 不 是 登录 页 面 ， 夺 是 ， 则 弹出 退出 提示 对 话 框 ,否则 就 按 默 认 方 式 处 理 ， 如 何 按 默 
认 方式 处 理 呢 ? 调用 父 类 的 实现 即 可 : 
QOverride 
public boolean onKeyDown(int keyCode, KeyEvent event)|í 


FragmentManager fragmentManager - getSupportFragmentManager(); 
if(fragmentManager.getBackStackEntryCount() == 0) 1{ 


ExitDialogFragment dialogFragment = new ExitDialogFragment (); 


dialogFragment.show(getSupportFragmentManager(), "exit"); 
return true; 

Jjelse | 
/ / DITAN HI RE 


return super.onKeyDown (keyCode,event); 
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完成 ， 收 功 ! 现在 运行 App 试 试 吧 。 


8.4.4 取消 输入 控件 的 焦点 


可 能 你 还 对 一 件 事 感到 不 爽 : 每 次 进入 登录 界面 时 ， 都 会 弹出 软 键盘 。 这 是 因为 最 上 面 的 
文本 输入 控件 默认 获得 了 焦点 ， 于 是 触发 了 软 键 盘 。 但 这 真 的 令 人 讨厌 ! Android 系统 又 来 日 
作 聪 明 ， 人 类 明明 不 喜欢 这 样 嘛 ! 我 们 想 输入 的 时 候 上 自己 点 出 来 ， 不想 的 时 候 束 别 出 来 。 

怎么 解雇 这 个 问题 呢 ? 只 需要 取消 输入 框 默认 获得 焦点 的 特性 即 可 。 打 开 登 录 Fragment 
的 UI 定 义 文件 fragment login.xml， 以 源码 的 形式 打开 ， 把 RelativeLayout 元 素 的 属性 更 改 如 
F: 


<RelativeLayout 
android:layout widthz"match parent" 


android:layout height-"wrap content" 


增加 了 两 个 属性 ， 必 须 同时 具有 这 两 个 属性 才能 获取 焦点 。 此 处 是 把 焦点 给 了 
RelativeLayout 这 个 容器 ， 这 样 的 话 文本 输入 控件 就 不 能 默认 获得 焦点 了 。 
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Android App 中 的 菜单 是 这 个 样子 ， 如 图 9.1 所 示 。 
四 


Messenger 


图 9.1 
ARAIZ, JERKE, WB 9.2 所 示 。 
ü 
Messenger Archived 


Blocked contacts 


Settings 


Help & feedback 


图 9.2 


在 前 面 ， 我 们 在 响应 App Bar 上 的 后 退 图 标的 点 击 时 ， 重 写 了 Activity 的 方法 
onOptionsItemSelected0 〇 ,这 个 方法 就 是 用 于 啊 应 菜单 项 的 选择 的 , 也 就 是 说 App Bar 上 的 后 退 
图 标 其 实 是 被 当做 菜单 项 来 处 理 的 。 但 是 ， 实 现 了 这 个 方法 并 不 能 让 菜单 出 现 ， 实 现 Activity 
的 男 一 个 方法 onCreateOptionsMenuO 才 能 让 玉 单 显示 出 来 ， 需 要 显示 沫 单 时 ， 它 会 被 系统 调 

用 , 我 们 必须 在 这 个 方法 中 创建 沫 单 。 你 要 搞 清 楚 一 点 : 不 是 我 们 吧 应 点 击 事件 然后 把 沫 单 显 
示 出 来 ， 而 是 系统 去 做 ， 我 们 要 做 的 是 写 出 创建 菜单 的 代码 。 也 融 是 说 ， 显 示 什 么 样 的 沫 单 由 
我 们 决定 ， 而 何 时 把 菜单 显示 出 来 由 系统 决定 。 总 之 ， 实 现 onCreateOptionsMenu0， 显 示 荣 
单 ， 实 现 onOptionsItemSelected0， 啊 应 菜单 项 。 
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下 面 我 们 首先 实现 onCreateOptionsMenu0 方 法 。 这 个 方法 有 一 个 参数 “Menu menu" , 它 
就 是 要 显示 的 菜单 ， 我们 创建 出 菜单 项 之 后 ， 要 把 羔 单 项 添加 到 这 个 菜单 里 面 。 菜单 项 如 何 创 
建 呢 ? 当然 我 们 可 以 使 用 代码 创建 菜单 项 ， 即 创建 类 Menultem 的 实例 ， 但 是 有 更 好 的 办 法 ， 
就 是 添加 一 个 菜单 资源 ， 在 资源 中 添加 菜单 项 ， 这 就 可 以 可 视 化 地 设计 菜单 。 

下 面 我 们 就 添加 一 个 菜单 资源 。 


EIE SET 
在 app 组 上 点 出 右键 菜单 ， 如 图 9.1.1 所 示 。 


BHO eee XXD eae» «rap-| ^ tu [s B 


© 'Ẹ Android @ MainActivity.java x | 5 fragme 
w 
ra M C3 app 有 ^C Ho 
So cE o oo 
E Link C++ Project with Gradle C3 Module 
2 Ctrl+X Android resource file 
3 cui," D Android resource directory 
n 人 1 Copy Path Ctri+shiftec | 目 Hle 
: Gi; Copy as Plain Text EJ Package 

E | P9 Paste Ctrl+V 图 C++ Class 

9.1.1 
选择 “Android resource file”， 出 现 创建 资源 对 话 框 ， 如 图 9.1.2 所 示 。 


File name: | main 


Resource type: | Menu 


Root element: menu 


Source set: main 


Directory name: | menu 


Available qualifiers: Chosen qualifiers: 


© Network Code [22] — 

Qo Locale othing to show 
有 Layout Direction E 

加 Smallest Screen Width 

m Screen Width 


"o [ore [ror 


图 9.1.2 


参照 图 9.1.2 去 填 ，“File name” 中 填 “main”， 这 是 资源 文件 的 名 字 ， 你 可 以 改 成 你 喜 
欢 的 ，“Resource type CAIRA!) ”这 一 项 必须 选 Menu， 其 余 不 变 ， 点 OK， 某 单 资 源 被 添 
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加 ， 如 图 9.1.3 所 示 。 


iW Android 


” Dapp 
» © manifests 
> [java 
v lares 
» © drawable 
» © layout 
v D men q 
3 main.xml 
» © mipmap 
- © values 


'* 1: Project 


« 7: Structure 


Captures 


在 上 图 中 ， 可 以 看 到 工程 文件 树 的 res 中 多 了 一 个 组 menu， 其 下 有 一 个 文件 main.xml. 
打开 这 个 文件 就 可 以 看 到 菜单 设计 界面 ， 如 图 9.1.4 所 示 。 


Bappw >. ^ 5i [à NM EE SEA? 

(© MainActivity.java x | ie main.xml x | (€ fragment login.xml x 

Palette Q 3- I+ FH ER HB. $- QNexus4- M25- 
INNEN = Menuiten wm 日 1% 四 回归 A 


:三 Search ltem 
:=| Switch Item 


IO Menu 


Group 上 
A 


Group 


Component Tree 


IC menu 


| Design Text 


inal E| O; Messages 


图 9.1.4 


看 起 来 跟 界面 设计 器 差不多 ， 我 也 不 必 多 介绍 了 ， 以 看 官 你 的 智 意 肯定 一 看 就 明白 。 
组 件 树 中 默认 已 经 有 了 一 个 menu， 代 表 一 个 沫 单 ， 我 们 需要 做 的 就 是 回 它 里 面 添加 沫 单 
项 。 拖 一 个 “Menu Item" f| menu 中 ， 注 意 不 要 往 组 件 树 里 拖 ， 拖 不 进去 ， 往 预览 图 中 拖 ， 


如 图 9.1.5 所 示 。 
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(© MainActivity.java x 


kà main.xml x | 加 fragment login.xml x 


Palette 


Q 3 I7 [B Hl SO. D Nexus4” 225 
© 26% © [3 Jj 


Menu item 


Component Tree 


IC menu 


必须 为 菜单 项 设置 id, 这 样 才 能 在 啊 应 时 区 分 是 哪个 被 选中 , title 也 要 设置 正确 的 值 。icon 
是 菜单 项 的 图 标 ， 你 可 以 为 它 设 置 一 个 drawable 资源 。showAsAction 表示 是 否 将 这 个 菜单 项 
放 到 ActionBar 上 ， 如 果 一 个 菜单 项 显示 在 ActionBarBar 上 ， 就 不 再 在 菜单 中 显示 了 ， 其 值 有 
以 下 选项 ， 如 图 9.1.7 所 示 。 


图 9.1.5 


添加 沫 单项 之 后 ， 就 可 以 选中 它 ， 在 属性 编辑 咒 中 对 它 进 行 编 辑 ， 如 图 9.1.6 所 示 。 


Jg S- 


[]Nexus4- àmí25- 


0O30% © O 4 E 


109 


icon 


showAsAction 


visible 


enabled 
checkable 


图 9.1.6 


action settings 


ER 


showAsAction X 


[ ] never 
[ ] ifRoom 


[ ) always 
[ ) withText 
[ ) collapseActionView 


图 9.1.7 


€ never 表示 永远 不 ， 这 是 默认 值 。 
€ ifRoom 表示 App Bar 只 要 有 空 件 ， 就 放 到 App Bar 上 。 
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€ always 表示 永远 放 在 App Bar 上 ， 不 管 有 没有 空间 。 
@  withText 表示 菜单 项 的 文本 与 图 标 一 起 显示 。 
€  collapseActionView 表示 菜单 项 如 果 是 一 个 复杂 控件 时 ， 把 这 个 控件 收缩 起 来 。 


res/menu/main.xml 这 个 文件 的 内 容 是 这 样 的 : 


<?xml version-"1.0" encoding="utf-8"?> 
«menu xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:android-"http://schemas.android.com/apk/res/android"» 


«item 
android:id="@+id/action settings" 
android:title-"ikE" /> 
«/menu» 


下 一 步 要 把 菜单 创建 出 来 。 


重 与 onCreateOptionsMenu() 


代码 如 下 ， 请 仔细 看 注释 : 


QOverride 
public boolean onCreateOptionsMenu(Menu menu) í( 
/ / BRATA ERURÉJEE SE ELT RI 
MenuInflater inflater - getMenuInflater(); 
// M EEURÉIESXCAÉ, f£ A menu Agi El & HII SEHE X menu "£F. 
inflater.inflate(R.menu.main, menu); 
//IR[H] true, KARERA FRA EX 


return true; 


此 时 再 运行 App， 是 不 是 能 看 到 菜单 了 ?如 图 9.2.1 Pr. 
点 击 图 标 出 现 菜 单 ， 如 图 9.2.2 所 示 。 


9.2.1 
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[uu] 

ERP 
MEREXE, MERDA EATA, wA 9.3.1 所 示 。 
点 “ 子 菜单 ”这 一 项 后 ， 出 现 子 菜单 ， 如 图 9.3.2 所 示 。 


子 菜 单 中 只 有 一 项 ， 上 图 中 灰色 的 字 是 这 个 子 荣 单 的 名 字 。 如 何 显 示 这 样 的 子 菜 单 呢 ? 首 
先 你 需要 添加 一 个 菜单 项 ， 将 其 Title 设置 为 字符 串 “ 子 菜单 ”， 如 图 9.3.3 所 示 。 


us 0 1217 


- AL | 图 9.3.2 


然后 拖 一 个 “Menu”， 放 到 这 个 新 加 菜单 项 上 ， 如 图 9.3.4 所 示 。 
注意 要 往 控 件 树 中 的 菜单 项 上 拖 ， 不 要 往 预 览 里 拖 。 反 正在 我 写 此 文 时 ， 沫 单 设 计 器 还 不 


是 很 完美 , 你 可 以 多 试 几 种 方式 , 得 到 想 要 的 结果 就 算 OK, 也 许 当 你 用 的 时 候 己 经 没 bug 了 。 
放 到 沫 单项 上 之 后 是 这 样子 ， 如 图 9.3.5 所 示 。 


9.3.3 


Palette 


Q **- 1- [E 
All 


:=| Menu Item 加 
:三 Search ltem 
:=| Switch Item 
Menu 
$88 Group 


Component Tree 


* |O menu 


Component Tree 


v [O menu 


三 action settings (设置 ) 


— actiom settings (设置 ) g EFRA 
EI 
"D 


IC menu -— 


» 


图 9.3.4 图 9.3.5 


menu 就 是 一 个 子 菜单 ， 需 要 往 它 里 面 添 加 菜单 项 ， 拖 一 个 Menu Item 给 它 吧 ， 但 是 不 行 ， 


拖 不 进去 ! 应 该 还 是 有 bug， 试 了 多 种 方式 不 行 ， 只 能 佘 大 招 了 ， 直 接 改 代码 ， 如 图 9.3.6 所 
不 。 
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Activityjava X | 局 mainxml x | 


menu | item menu 
<?xml version-"1.0" encoding-"utf-8"?» 


«menu xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:androidz"http://schemas.android.com/apk/res/android"» 


«item 
android:id-"g«id/action settings" 
android:title=" 设 置 ” /> 
«item android:title=" 子 菜单 "> 
Q menu 
<item android:title=" 子 菜单 项 "/> 
«/menu» 
«/item» 
«/menu» 


9.3.6 


在 设计 器 中 看 起 来 这 样 ， 如 图 9.3.7 所 示 。 


Component Tree 
(C menu 
三 action settings (12 8) 
iz RB 
(C menu 


三 | 子 侍 单项 + 


9.3.7 


选中 这 个 新 加 的 子 菜单 项 ， 设 置 它 的 站， 如 图 9.3.8 所 示 。 


action submenu item 


title 子 菜单 项 


icon 


showAsAction 


visible 


enabled 


checkable 


完工 ， 运行 看 看 效果 吧 。 
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菜单 项 分 组 


菜单 项 分 组 主要 用 于 在 菜单 中 模拟 单 选 按钮 和 多 选 按钮 的 效果 , 比如 可 以 把 多 个 菜单 项 加 
入 同一 个 组 , 设置 这 个 组 的 属性 checkableBehavior， 可 以 将 这 几 个 菜单 项 设置 成 单 选 按钮 的 行 
为 ， 也 可 以 设置 成 多 选 按钮 的 行为 ， 如 图 9.4.1 所 示 。 


Q $- !- [E iei o. Nexus4 * MOS» Properties 


T 
:=| Search Item checkableBehavior 
三 Switch Item | | | enabled 
IO Menu 


8i Group 


menuCategory 
j orderlncategory 
7A visible 


Menu Item 


omponent Tree E. | 
IC) menu " 
[=] action settings (122) 
ES 
(C menu 
= 7E 


group 
= i i 


= Item 


图 9.4.1 


由 于 不 常用 ， 就 不 详细 讲 了 ， 请 读者 日 行 上 网 搜索 学 习 。 


啊 应 菜单 项 


前 面 讲 过 ， 啊 应 菜单 项 应 该 在 方法 onOptionsItemSelected0 中 ， 我 们 已 经 在 MainActivity 
类 中 实现 了 它 。 现 在 要 做 的 是 在 其 中 添加 对 新 增加 的 菜单 项 的 啊 应 ， 废 话 少 说 ， 直 接 上 代码 : 


GOverride 
public boolean onOptionsItemSelected(MenuItem item) { 
int id = item.getItemId(); 
if (id == android.R.id.home) ( 
//4/ I Action bar £H PIBER 
FragmentManager fragmentManager = getSupportFragmentManager(); 
if(fragmentManager.getBackStackEntryCount() == 0) { 
/ / RUE AB FEES. MABT XX ELVAI, rB HI EZ IA TEE 


ExitDialogFragment dialogFragment = new ExitDialogFragment (); 

dialogFragment.show(getSupportFragmentManager(), "exit"); 
yelse { 

/ / MAITB PF h RHI Fragment 

fragmentManager .popBackStack(); 


} 


// &NKBEI BE H M AU "true 
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return true; 

Jelse if(id--R.id.action piod 
//XE T IE BLIEAÉ, WI RETTE 
Snackbar.make(findViewById(R.id.fragment container), 


"你 选 了 设置 " ， 


Snackbar.LENGTH LONG).show(); 
Jelse if(id == R.id.action submenu item)( 


//Xb Y TRA RIETI, dI REA 
Snackbar.make(findViewById(R.id.fragment container), 


"你 选 了 子 菜单 项 "， 


Snackbar.LENGTH LONG).show(); 
] 


return super.onOptionsItemSelected (item); 


TEJI ip TIH RE” KAMM TKR” KEMA, AA 3XUSL ABIIT 
菜单 项 id 进行 比较 。 对 它们 的 啊 应 是 简单 的 显示 提示 信息 。 显 示 提 示人 信息 用 了 一 个 叫 作 
Snackbar 的 类 。 让 我 们 花 一 点 点 时 间 学 习 一 下 这 个 类 的 用 法 : 调用 Snackbar 的 静态 方法 make() 
创建 一 个 Snackbar 对 象 。 回 make0 传 入 三 个 参数 : 第 一 个 参数 是 一 个 View， 提 示 信 息 就 显示 
在 它 或 它 的 父 View 上 面 ， 第 二 个 参数 是 信息 内 容 ， 第 三 个 参数 是 信息 显示 的 时 间 ， 我 们 传 入 
的 是 “LENGTH LONG”， 一 看 就 知道 是 长 时 间 显 示 。 之 后 调用 Snackbar 对 象 的 方法 show() 
把 提示 信息 显示 出 来 ， 效果 如 图 9.5.1 所 示 。 


图 9.5.1 


HREF RA” XAM, Snackbar 便 出 现 ， 它 是 出 现在 底部 的 一 个 长 条 ， 过 一 段 时 间 
€ 这 个 时 间 的 长 短 就 是 由 Eee 
: 其 实 Snackbar 显示 时 所 在 的 控件 并 不 一 定 是 make0 的 第 一 个 参数 传 入 的 View。 事 
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情 的 经 过 是 这 样 的 : make0 方 法 内 部 会 查看 传 入 的 View 是 否 合适 。 比 如 你 传 入 的 是 一 个 很 小 
的 Button， 在 它 上 面 是 不 可 能 显示 一 个 长 条 ， 所 以 会 得 看 Button 的 和 爸爸， 如 果 它 郊 爸 不 合适 
再 得 看 它 的 爷爷 ， 直 到 找到 一 个 合适 的 View, Snackbar 就 显示 在 它 上 面 。 

Snackbar 取代 了 传统 的 显示 提示 类 Toast。 然而 Snackbar 也 不 是 Android SDK 核心 库 中 的 
类 ， 而 是 Design 库 中 的 ， 所 以 要 添加 对 Design 库 的 依赖 : implementation 
'com.android.support:support-v4:27.+'。 现 在 的 依赖 项 是 这 样 的 : 
dependencies { 

implementation fileTree (include: ['*.jar'], dir: 'libs") 

implementation 'com.android.support:appcompat-v/7:27.-' 


implementation 'com.android.support.constraint:constraint-layout:1.1.0' 
implementation 'com.android.support:design:27.-' 


implementation 'com.android.support:support-v4:27.-' 


testImplementation 'junit:junit:4.12' 

androidTestImplementation 'com.android.support.test:runner:1.0.1' 

androidTestImplementation 
'com.android.support.test.espresso:espresso-core:3.0.1' 


} 


注意 版 本 号 ， 我 的 是 27.+， 当 你 读 此 文 时 ， 此 版 本 号 应 该 又 更 新 了 ， 切 不 可 随意 填 ， 要 
参考 一 下 Support 库 的 版 本 ， 与 它 一 样 就 没 问 题 。 


N 


其 他 菜单 类 型 


前 面 讲 的 菜单 有 个 名 字 ， 叫 作 “Options CAm) 菜单 ”。 其 实 ， 还 有 两 种 不 同 的 菜单 ， 
一 种 叫 “Context (上 下 文 ) 沫 单 ”， 一 种 叫 “Popup (弹出) KA” - 

上 下 文 菜单 是 什么 样 呢 ? 你 在 一 个 电 商 App 中 ， 在 一 条 商品 上 长 按 ， 可 能 会 出 现 菜单 ， 
这 个 菜单 就 是 上 下 文 菜单 。 要 想 把 它 显 示 出 来 ,必须 设置 目标 控件 文 持 上 下 文 菜 单 ， 然后 还 要 
重 写 Activity 中 有 关 的 方法 ， 思 路 上 跟 选 项 菜单 差不多 。 

选项 菜单 和 上 下 文 菜 单 有 一 个 共同 点 , 就 是 我 们 不 能 主动 把 它们 呈现 出 来 。 它们 如 何 出 现 
我 们 决定 不 了 , 我 们 只 能 决定 显示 什么 样 的 菜单 。 而 弹出 菜单 就 不 一 样 了 , 我 们 可 以 决定 它 如 
何 显 示 ， 因 为 它 的 呈现 是 我 们 调用 相应 的 方法 造成 的 ， 这 些 羔 单 不 常用 ， 所 以 我 就 不 细 讲 了 。 
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动画 是 提高 视觉 感受 的 有 力 手段 ， 所 以 必须 学 会 Android 动画 ! 当然 了 , 不 愿 学 的 话 你 可 
以 略 过 去 。 


10.1 JEFE 


所 有 系统 或 开发 库 中 , 动画 实现 的 原理 都 一 样 : 即 重复 每 隔 一 段 时 间 改 变 一 下 界面 这 个 动 
作 。 当 间隔 时 间 很 短 时 ， 比 如 30 毫秒 改变 一 次 ， 那 么 界面 的 改变 对 人 有 眼 来 说 就 很 快 了 ， 人 有 眼 
就 感觉 到 界面 动 起 来 了 ， 间 隔 时 间 越 短 人 眼 感觉 动画 越 顺 滑 。 
既然 知道 了 这 个 原理 , 我 们 完全 可 以 用 定时 器 自己 实现 动画 。 先 说 一 下 定时 器 是 什么 。 定 
时 器 在 各 系统 中 都 存在 ,使 用 它 可 以 设 定 在 某 个 时 间 点 执行 某 种 动作 , 或 从 现在 开始 计时 ， 多 
长 时 间 之 后 执行 菜 种 动作 ， 或 每 间隔 一 段 时 间 反 复 执 行 某 种 动作 。 对 应 定时 器 的 类 叫 Timer. 
使 用 定时 器 时 ， 要 告诉 Timer 对 象 执 行 什么 动作 〈 即 代码 ) ， 间 隅 多 长 时 间 执 行 ， 是 否 重 复 等 
信息 。 下 面 代码 用 于 启动 一 个 定时 器 ， 从 现在 起 10 毫秒 后 开始 执行 一 个 动作 ， 然 后 每 隔 30 
毫秒 重复 这 行 这 个 动作 : 
//TERUERIE 
/ / &/& — fig hl A80] je 
Timer timer-new Timer(); 
//f&l& —f TimerTask HR, ZMT IHINRERE EAK 
TimerTask timerTask = new TimerTask() { 
QOverride 
public void run() { 
/ / EPI AE HEATH ICE 
/ / RIRA BERT EJ 
Date date-new Date(); 


Log.i("timetest",date.toString()); 
} 


}; 
// EUBX T EHI T 


timer.schedule(timerTask,10,30); 


这 个 定时 器 执行 的 动作 就 是 在 日 志 中 输出 当前 的 时 间 。 这 段 代码 放 在 哪里 呢 ?” 放 在 哪里 都 
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fT, 我 放 在 了 MainActivity 的 onCreate0 方 法 中 , 这 样 App 一 局 动 时 就 开始 执行 了 , 有 图 10.1.1 
为 证 : 


Z > - = iuc Jui ZU I UJI JU UMI"UJU.UU CUIT 
07-25 12:51:50. 228 2669-2694/niuedu. com. prod I/timetest: Tue Jul 25 12:51:50 GMT+00:00 2017 
07-25 12:51:50. 260 2669-2694/niuedu. com. andfirststep I/timetest: Tue Jul 25 12:51:50 GMT*00:00 2017 
07-25 12:51:50. 293 2669-2694/niuedu. com. andfirststep I/timetest: Tue Jul 25 12:51:50 GMT+00:00 2017 


07-25 12:51:50. 325 2669-2694/niuedu. com. andfirststep I/timetest: Tue Jul 25 12:51:50 GMT+00:00 2017 
07-25 12:51:50. 356 2669-2694/niuedu. com. andfirststep I/timetest: Tue Jul 25 12:51:50 GMT*00:00 2017 


07-25 12:51:50. 388 2669-2694/niuedu. com. andfirststep L/timetest: Tue Jul 25 12:51:50 GMT-00:00 2017 
*TODO Ñ & Android Monitor Terminal |Q; Messages 


图 10.1.1 
如 果 我 们 把 输出 日 志 的 代码 改 为 改变 一 个 控件 的 位 置 的 代码 ， 那 么 就 让 这 个 控件 动 起 来 
了 。 由 于 涉及 多 线程 ， 而 现在 又 没 讲 多 线程 ， 所 以 我 就 不 演示 此 功能 了 ,但 是 我 们 可 以 借 此 先 
研究 一 下 创建 一 个 动画 所 需要 的 数据 : 


e ii? 

e ZIRE? 比如 位 置 ? 角度 ?缩放 .….… (IZT) 

e 动 多 长 时 间 ? 

e 动 一 下 还 是 重复 动 ? 重复 动 的 话 ， 一 次 执行 完 ， 下 一 次 是 否 需要 反 向 动 ? 还 有 ， 重 复 
多 少 次 ? 

e 怎么 动 法 ? 匀速 ?还 是 先 快 后 慢 ? 还 是 …… 


记 住 上 面 这 些 动 画 相 关 的 要 素 ， 就 容易 理解 动画 API 的 使 用 了 。 


A. F, i. 
| | A BE ——— 
É E. 5 -— HE 
< | [à s 


Android 中 提供 了 三 种 动画 ，View〈 视 图 ) 动画 、property (属性 ) 动画 和 Drawable 动画 。 
View 动画 是 Android 早期 就 出 现 的 ， 现 在 依然 可 用 的 传统 创建 动画 的 方式 。 属 性 动画 是 新 出 
现 的 方式 。Android 希望 我 们 尽量 使 用 属性 动画 ， 但 是 View 动画 也 不 会 被 废弃 ， 因 为 在 某 些 
情况 下 ， 只 能 使 用 View 动画 。Drawable 动画 是 对 多 个 Drawable 对 象 〈 你 现在 可 认为 是 图 片 ) 
进行 动画 ,这 跟 放 电影 一 样 , 它 没 有 前 面 两 种 复杂 , 一 般 用 不 到 ， 本 书 就 不 讲 了 , 请 自行 研究 。 

你 可 能 还 会 看 到 layout 动画 或 转 场 动画 等 不 同名 词 ， 这 些 动画 都 是 利用 View 动画 或 
property 动画 为 某 种 过 程 提供 了 动画 效果 ， 它 们 与 View 动画 和 property 动画 不 是 一 个 层次 的 
概念 。 
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View 动画 


在 我 们 的 登录 页 面 中 有 一 个 头像 ， 我 们 就 动 一 下 这 个 头像 吧 , 我 先 让 它 转 起 来 。 在 动 它 之 
前 先 给 它 设 置 一 个 有 意义 的 ia， 如 图 10.3.1 所 示 。 


Properties 


ID | imageViewHead 


layout width 100dp 


layout height 100dp 
ImageView 
srcCompat (Qdrawable/female 


contentDescription 


background BW Gcolor/colorAccent 


scaleType none 


图 10.3.1 


还 要 为 它 建 立 对 应 的 成 员 变 量 ， 并 让 变量 指 回 这 个 控件 。 所 以 你 需要 在 LoginFragment 类 
中 添加 字段 “ImageView imageView ;:”， 然 后 在 onCreateViewQ"P Z87II3X — 6J: 


然后 就 可 以 放心 大 胆 地 动 它 了 ， 少 说 废话 ， 直 接 上 代码 : 


// &l& — PREF 5p (HE? GAE 

RotateAnimation animation =new RotateAnimation(0.0f, 360f); 
// I BERE EE IU,REVERSE RREA AI RB IRIS) AJER) 
animation.setRepeatMode (Animation .REVERSE) ; 

// IEEFFÉERTIH], 1000 ZØ (AE TERI EI) 
animation.setDuration(1000); 

animation.setRepeatCount (10) ; 

// BAA (AEA imageViewJ 

imageView.startAnimation (animation); 


这 段 代码 是 创建 了 一 个 旋转 动画 ， 然 后 应 用 到 图 像 控 件 上 ， 图 像 控 件 就 转 起 来 了 。 把 这 段 
代码 放 到 哪里 呢 ? 放 到 onCreateView0O 中 不 合适 ， 因 为 onCreateView0O 中 只 是 加 载 控件 ， 还 没 
有 把 根 控 件 放 到 Activity 中 容器 中 CHI FragmentLayout， 见 activity main.xmD ， 所 以 动画 不 
能 起 作用 。 我 们 放 到 啊 应 登录 按钮 的 方法 中 吧 ， 在 这 里 没 问 题 : 


buttonLogin.setOnClickListener (new View.OnClickListener() { 
QOverride 


public void onClick(View v) { 
//fl/£& Snackbar XJ 
Snackbar snackbar = Snackbar.make(v, "JR ERSTE", 
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Snackbar.LENGTH LONG); 


snackbar.show(); 


// CUE —f EFE ZB (ARE? GAPE) 

RotateAnimation animation -new RotateAnimation(0.0f, 180f); 
// I ELI E BETU,REVERSE HEREA — (E IAE IRIS] GJER) 
animation.setRepeatMode (Animation.REVERSE); 


// RER, 1000 ZØ (AE EHI IRI) 
animation.setDuration(1000); 

// REAR CAE 
animation.setRepeatCount (10); 

// BHAA (AE imageView) 
imageView.startAnimation (animation); 


运行 ， 点 一 下 “登录 ”按钮 ， 你 会 发 现 除了 显示 一 条 提示 信息 外 ， 头 像 也 动 了 起 来 ， 如 图 
10.3.2 所 示 。 


图 10.3.2 


可 以 看 到 转 得 很 诡异 ， 其 实 是 以 图 像 的 左上 和 角 为 轴 进 行 旋转 ， 转 完 半 较 (180 度 ) 后 不 再 
继续 转 ， 而 是 反问 转 半 圈 。 一 般 都 不 想 这 样 转 ， 而 以 图 像 中 心 点 为 轴 进 行 旋转 ， 这 也 不 难 ， 下 
回 分 解 。 


10.3.1 RERO 


那 我 们 就 再 改 一 下 动画 吧 。 改 哪里 呢 ? 改动 男 对 象 的 创建 方式 ， 即 调用 另 一 个 构造 方法 。 
当前 的 构造 方法 有 两 个 参数 , 第 一 个 是 动 男 开 始 角度 , 第 二 个 是 动画 结束 角度 , 下 面 改 为 这 样 : 


RotateAnimation animation -new RotateAnimation(0.0f, 180f, 


Animation.RELATIVE TO SELF, 0.5f, 
Animation.RELATIVE TO SELF, 0.5f); 


这 个 构造 方法 增加 了 四 个 参数 , 前 两 个 参数 是 开始 角度 和 结束 角度 , 第 四 个 参数 是 旋转 轴 
(ME X 坐标 上 的 位 置 ， 第 三 个 参数 是 第 四 个 参数 的 类 型 ， 我们 传 入 的 是 “relative to self (相对 


156 


第 10 章 ”动画 


于 自己 ) ”， 即 这 个 轴 心 的 和 坐标 是 相对 于 图 像 自己 来 说 的 ，0 表示 最 左边 ，1 表示 最 右边 ， 
那么 0.5 就 是 中 心 ; 后 两 个 参数 跟 这 两 个 一 致 ， 只 是 表示 的 是 Y 坐标 。 

现在 再 运行 App 看 看 ， 是 不 是 正常 转 了 ? 如 果 你 仔细 观察 的 话 ， 还 会 发 现 每 次 旋转 都 是 
从 慢 到 快 再 到 慢 ， 而 不 是 匀速 。 决定 这 种 行为 的 是 插值 函数 ,利用 它 可 以 做 出 各 种 有 意思 的 行 
为 。 


10.3.2 不 要 反问 转 


但 是 ， 转 一 圈 再 倒 着 转 回来 让 人 不 爽 ， 转 完 一 圈 继 续 同一 方向 转 才 好 嘛 ， 如 何 改动 呢 ? 注 
意 动画 设置 中 的 这 一 句 : animation.setRepeatMode(Animation.REVERSE); ， 它 用 于 设置 重复 模 
3X. reverse 是 反 回 的 意思 ， 如 果 不 要 反问 ， 那 你 可 以 把 这 人 句 去 掉 。 也 可 以 把 这 个 参数 改 为 
Animation.RESTART， 但 此 时 变 成 了 转 半 圈 后 一 下 变 到 原始 角度 然后 再 转 半 圈 ， 这 更 不 爽 了 。 
怎么 改 才 能 变 成 在 沿 同 一 方 癌 不 停 地 转 呢 ? 你 可 能 想到 了 ， 把 旋转 角度 改 为 360 BE: 


RotateAnimation animation -new RotateAnimation(0.0f, 360f, 


Animation.RELATIVE TO SELF, O.5f, 
Animation.RELATIVE TO SELF, 0.5f); 


此 时 可 以 连续 同方 向 转 了 , 但 是 由 于 先 慢 再 快 再 慢 的 行为 ,两 次 动画 之 间 还 是 有 明显 的 售 
顿 ， 要 解决 这 个 问题 ， 我 们 只 要 把 旋转 速度 改 为 匀速 即 可 ， 改 变 方 式 很 简单 ， 增 加 下 面 一 句 调 
用 : 


animation.setInterpolator (new LinearInterpolator () ) ; 


Interpolator 是 插值 的 意思 ，Linear 是 线性 的 意思 。 我 们 创建 动画 时 只 指定 了 开始 值 和 结束 
值 ,根据 前 面 讲 的 原理 , 每 阳 一 段 很 短 的 时 间 就 需要 重新 画 控 件 ， 画 控件 时 要 得 到 它 当 前 的 旋 
转角 度 ， 这 个 角度 需要 根据 开始 值 和 结束 值 以 及 当前 播放 时 间 占 总 动画 时 间 的 比率 计算 出 来 ， 
如 何 计算 呢 ?” 如 果 是 匀速 动 就 比较 容易 , 只 需 用 当前 时 间 与 总 时 间 的 比率 乘 上 总 旋转 角度 束 计 
算出 来 了 ， 这 种 勺 速算 法 叫 作 线 性 插值 。 但 默认 可 不 是 匀速 ， 而 是 先 慢 后 快 再 慢 ， 那 么 就 需要 
用 一 个 正弦 函数 来 计算 插值 ， 总 之 它们 叫 作 插 值 函数 ,就 是 来 帮助 计算 中 间 值 的 。 现在 再 运行 
看 一 下 吧 ， 是 不 是 旋转 变 成 了 匀速 ?以 下 是 其 他 类 型 的 插值 函数 ， 你 可 以 试 试 它们 ， 可 能 会 出 
现 很 有 意思 的 效果 : 


€  AccelerateDecelerateInterpolator: 在 动画 开始 与 结束 的 地 方 速率 改变 比较 慢 ， 在 中 间 
的 时 候 加 速 ; 

AccelerateInterpolator: 在 动画 开始 的 地 方 速 率 改 变 比较 慢 ， 然 后 开始 加 速 ; 
AnticipateInterpolator: 开始 的 时 候 向 后 然后 向 前 甩 ; 

AnticipateOvershootInterpolator: 开始 的 时 候 向 后 然后 向 前 甩 一 定 值 后 返回 最 后 的 值 ; 
BounceInterpolator: 动画 结束 的 时 候 弹 起 ; 

CycleInterpolator: 动画 循环 播放 特定 的 次 数 ， 速 率 改 变 沿 着 正弦 曲线 ; 
DecelerateInterpolator: 在 动画 开始 的 地 方 快 然后 慢 ; 
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€ Linearlnterpolator: 以 常量 速率 改变 ; 
€  OvershootInterpolator: 向 前 甩 一 定 值 后 再 回 到 原来 位 置 。 


10.3.3 ”举一反三 


玩 过 了 旋转 动 夯 ， 其 他 的 动画 上 怎么 创建 以 及 设置 ， 以 看 官 你 的 智慧 肯定 能 轻松 推出 来 。 下 
面 简单 列举 一 下 其 他 类 型 的 动画 。 


e 移动 位 置 (TranslateAnimation ) 
> 在 创建 动画 对 象 时 应 该 就 需要 指定 开始 位 置 和 结束 位 置 。 
> 重复 模式 指定 为 反 向 时 应 该 移 到 结束 位 置 后 再 反 向 移 回 来 。 
> 默认 动画 应 是 先 慢 后 快 再 慢 。 
> 设置 为 线性 插值 后 应 是 匀速 移动 。 
€ 缩放 (ScaleAnimation ) 
> 在 创建 动画 对 象 时 应 该 需要 指定 开始 缩放 比例 和 结束 缩放 比例 。 
> 还 可 以 指定 仅 在 X 轴 上 动 ( 宽 罕 变化 ) 或 仅 在 立轴 上 动 ( 高矮 变 化 ) 或 XY 轴 同 
时 动 。 
> 在 重复 模式 指定 为 反 向 时 会 从 大 到 小 再 从 小 到 大 这 样 来 回 变 。 
> 默认 动 法 应 是 先 慢 后 快 再 慢 。 
> 设置 为 线性 插值 后 应 是 匀速 变 大 变 小 。 
e 改变 透明 度 (AlphaAnimation ) 
> 在 创建 动画 对 象 时 需要 指定 透明 度 的 开始 值 和 结束 值 。 
> 重复 模式 指定 为 反 向 时 , 会 在 消失 和 显现 之 间 来 回 变 化 ， 如 果 配 上 音乐 , 会 有 一 种 
> 隐现 过 程 也 可 以 通过 插值 函数 控制 其 速度 变化 曲线 ， 但 似乎 人 眼 感 觉 不 出 差别 。 


10.3.4 ”动画 组 


有 时 你 可 能 需要 多 个 动画 同时 播放 , 而 你 又 想 对 这 些 动 画 进 行 统 一 控制 , 比如 所 有 动画 都 
用 同一 个 插值 函数 ， 所 有 动画 都 延迟 一 段 时 间 执 行 等 等 ， 这 就 要 用 到 动画 组 。 

动画 组 是 类 AnimationSet 的 实例 ， 它 可 以 包含 多 个 动画 对 象 ， 同 时 它 自己 又 具有 一 个 普 
通 动画 对 象 的 所 有 功能 ,也 就 是 通过 它 可 以 把 一 堆 动 画 当 作 一 个 动画 来 操作 。 下 面 是 代码 示例 : 
pz EESTETEEUDIETTI 


RotateAnimation animation -new RotateAnimation(0.0f, 360f, 
Animation.RELATIVE TO SELF, O0.5f, 
Animation.RELATIVE TO SELF, 0.5f); 

// IEEE E ER TU,REVERSE RREA IRAR GJER) 

animation.setRepeatMode (Animation .RESTART) ; 

// QERA, 1000 Ø CIE EB [E] ) 

animation.setDuration(1000); 


// ELE EE CAN 
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animation.setRepeatCount (10); 
// REA TEJE, RNEER. OIA? RIFI ER) 


animation.setInterpolator(new LinearInterpolator()); 


// EJE — PB EJ, EXA Y LM ERIEM 0.5 8/1.5. 

ScaleAnimation scaleAnimation-new ScaleAnimation(0.5f,1.5f£,0.5f,1.5£f); 
ScaleAnimation.setRepeatMode (Animation.REVERSE); 
scaleAnimation.setDuration(2000); 

// BESTIA IK INTR LE 


scaleAnimation.setRepeatCount (animation.INFINITE); 


// EVEJ R, EURIE A A GRA ANA R 
AnimationSet animationSet-new AnimationSet(false); 
animationSet.addAnimation (animation); 
animationSet.addAnimation(scaleAnimation); 


// ESI (AE imageView) 
imageView.startAnimation(animationSet); 


上 面 代码 中 ， 除 了 原来 的 旋转 动画 ， 又 创建 了 一 个 缩放 动画 ， 然 后 把 这 两 个 动画 加 到 
animationSet 中 ， 注 意 最 后 imageView 局 动 动 男 是 通过 动画 组 ， 而 不 是 某 个 动画 。 还 要 注意 缩 
放 动 画 的 重复 次 数 是 INFINITE (无 尽 的 ) ， 即 不 停息 。 运 行 看 看 吧 ， 这 两 个 动画 结合 后 ， 这 
个 头像 的 行为 变 得 很 怪异 。 


属性 动画 


属性 动画 所 用 到 的 类 与 视图 动画 不 同 , 但 实际 上 它们 的 实现 原理 是 一 样 的 , 在 操作 动画 时 
要 考虑 的 因素 也 完全 一 样 ， 我 们 下 面 就 用 属性 动画 的 API 把 前 面 的 动画 重新 实现 一 人 遍 。 
注意 一 个 问题 ， 视 图 动画 类 叫 作 XXXXAnimation， 而 属性 动画 的 类 叫 XXXXAnimator。 


10.4.1 旋转 动画 


首先 弄 一 个 旋转 动画 ， 还 是 旋转 登录 页 面 上 那个 头像 。 但 是 在 这 之 前 , 我 先 把 操作 视图 动 
男 的 代码 移 到 一 个 方法 中 ， 这 个 新 建 的 方法 是 : publie void testViewAnimation()。 然 后 再 新 建 
一 个 方法 public testPropertyAnimator0， 把 属性 动画 代码 放 在 其 中 ， 并 且 在 啊 应 登录 按钮 的 方 
法 中 调用 它 : 
public void testPropertyaAnimator () { 


/ / CJE — P DEFE SJE 


ObjectAnimator rotateAnimator = 


ObjectAnimator.ofFloat(imageView,"rotation",0.f,180.f); 
rotateAnimator.setDuration(1000); 
rotateAnimator.setRepeatCount (10) ; 
rotateAnimator.setRepeatMode (ValueAnimator. REVERSE); 
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rotateAnimator.setInterpolator(new LinearInterpolator()); 


rotateAnimator.start(); 


} 


让 我 对 比 着 视图 动画 来 讲 。 创 建 动画 时 只 使 用 一 个 类 : ObjectAnimator . 我 们 使 用 了 它 的 
静态 工厂 方法 ofFloat0 来 创建 一 个 动画 对 象 ， 这 个 方法 表示 动画 的 值 由 float. 型 数据 表示 。 还 
有 很 多 其 他 工厂 方法 ， 比 如 ofArgb0， 你 应 该 能 想到 这 个 动画 的 值 由 ARGB 型 数 表 示 ， 它 是 
什么 , 颜色 嘛 。 再 回 到 这 个 旋转 动画 , 我 们 为 ofFloat0 传 入 了 4 个 参数 , 第 一 个 是 要 动 的 控件 ， 
第 二 个 是 要 动 的 属性 , 改变 旋转 属性 的 值 不 就 是 让 它 转 吗 ? 那 这 个 属性 的 名 字 是 如 何 得 到 的 呢 ? 
我 怎么 知道 要 动 的 控件 有 没有 这 个 属性 呢 ? 这 很 好 办 , 你 只 要 看 一 下 目标 控件 的 Setter 方法 就 
行 ， 如 图 10.4.1.1 所 示 。 


imageView.set 

Objec' im ù setPressed(boolean pressed) 

rotati tm ù setRevealOnFocusHint(boolean revealo.. 
setRight(int right) 
setRotation(float rotation) 
setRotationX(float rotationX) 
setRotationY(float rotationY) 
setSaveEnabled(boolean enabled) 
setSaveFromParentEnabled(boolean ena.. 
setScalex(float scaleX) 
setScalev(float scaleYv) 
ceot&cnrnallRanrnefailtnelavReforerFada(í1 


10.4.1.1 


后 面 的 方法 就 不 必 多 说 了 ,最 后 一 条 语句 是 局 动 动画， 由 于 前 面 忆 指定 了 要 动 的 控件 , 所 
以 这 里 直接 调用 动画 对 象 的 startO 的 方法 即 可 。 运 行 App 看 看 吧 ， 是 不 是 点 登录 按钮 后 图 像 以 
自己 的 中 心 点 为 转轴 来 回转 ? 

属性 动画 API 是 被 推荐 使 用 的 ， 它 是 吸收 视图 动画 经 验 后 改进 的 ， 不 论 要 动 一 个 控件 的 
什么 地 方 , 动画 的 创建 代码 都 很 一 致 , 而 且 几 乎 可 以 动 控件 的 所 有 属性 。 但 是 我 提出 一 个 问题 ， 
能 不 能 让 图 像 转 的 时 候 ， 以 它 的 左上 角 为 转轴 ? 似乎 不 大 好 和 弄 吧 。 


10.4.2 动画 组 
属性 动画 也 支持 动画 组 ， 见 下 面 的 代码 ; 


public void testPropertyAnimator (){ 
// Él && — f EFE ZI IBI 
ObjectAnimator rotateAnimator - 
ObjectAnimator.ofFloat(imageView,"rotation",0.f,180.f); 
rotateAnimator.setDuration(1000); 


rotateAnimator.setRepeatCount (2) ; 


rotateAnimator.setInterpolator(new LinearInterpolator()); 
rotateAnimator.setRepeatMode (ValueAnimator. REVERSE); 
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ObjectAnimator scaleAnimatorX - 
ObjectAnimator.ofFloat(imageView,"scalexX",0.5f,1.5f); 

scaleAnimatorX.setDuration(1000); 

scaleAnimatorX.setRepeatCount (10) ; 

scaleAnimatorX.setRepeatMode (ValueAnimator. REVERSE); 


// Él& —IB EI, y 1 
ObjectAnimator scaleAnimatorY - 
ObjectAnimator.ofFloat(imageView,"scaleY",0.5f,1.5f); 


scaleAnimatorY.setDuration(1000); 
scaleAnimatorY.setRepeatCount (10) ; 
scaleAnimatorY.setRepeatMode (ValueAnimator. REVERSE) ; 


/ / Él f£ — VNA 

AnimatorSet animatorSet- new AnimatorSet(); 

animatorSet.play(scaleAnimatorX).with(scaleAnimatorY). 
after (rotateAnimator); 

animatorSet.start(); 


因为 要 放 到 动画 组 中 ， 所 以 旋转 动画 的 start0 方 法 不 再 被 调用 ， 并 且 又 创建 了 两 个 缩放 动 
画 , 我 们 无 法 在 ImageView 中 找到 一 个 叫 作 setScale0 的 属性 , 只 能 找到 setScaleXO 和 setScaleY () 
这 两 个 属性 , 所 以 我 们 需要 创建 两 个 动画 实现 横 问 和 纵向 上 同时 缩放 。 注意 这 里 创建 动画 组 时 
所 用 的 类 ， 不 是 AnimationSet 了 ， 而 是 AnimatorSet。 把 动画 加 到 动画 组 中 不 再 是 add0， 而 是 
playO0、withO、before0 、after0 之 类 的 方法 ， 设 置 几 个 动画 之 间 的 播放 顺序 时 就 像 写 作文 ， 比 
如 这 里 表达 的 是 “播放 scaleAnimatorX 与 scaleAnimatorY 在 rotateAnimator 之 后 ”。 上 所 以 当 
你 运行 App 时 ， 看 到 头像 先 转 几 下 ， 转 完 后 再 忽 大 忽 小 不 停歇 。 

当然 创建 控件 动画 的 API 不 止 讲 的 这 些 ， 还 有 其 他 的 方式 ， 但 它们 都 是 基于 视图 动画 或 
属性 动画 的 一 些 变形 而 已 ， 讲 不 讲 的 没意思 ,本 书 以 传授 原理 为 目的 ， 而 不 是 做 成 一 个 大 而 全 
的 手册 ， 所 以 就 不 讲 了 。 互 联网 就 是 最 好 的 手册 ， 如 果 感 兴趣 ， 自 己 上 网 查 去 吧 。 

现在 整个 LoginFragment 类 的 样子 是 这 样 的 : 


package niuedu.com.andfirststep; 


import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 


android.animation.AnimatorSet; 
android.animation.ObjectAnimator; 
android.animation.ValueAnimator; 
android.os.Bundle; 
android.support.annotation.Nullable; 
android.support.design.widget.Snackbar; 
android.support.v4.app.Fragment; 
android.support.v4.app.FragmentManager; 
android.support.v4.app.FragmentTransaction; 
android.view.LayoutInflater; 
android.view.View; 
android.view.ViewGroup; 
android.view.animation.Animation; 
android.view.animation.AnimationSet; 
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import android.view.animation.LinearInterpolator; 
import android.view.animation.RotateAnimation; 
import android.view.animation.ScaleAnimation; 
import android.widget.Button; 

import android.widget.EditText; 

import android.widget.ImageView; 


public class LoginFragment extends Fragment { 
EditText editTextName; 
EditText editTextPassword; 
ImageView imageView ; 


QOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
// UË Fragment Hj if] 
View v = inflater.inflate(R.layout.fragment login, container, false); 


// BRAF EREE wA TEE 

editTextName = (EditText) v.findViewById(R.id.editTextName); 
editTextPassword - (EditText) v.findViewById(R.id.editTextPassword); 
imageView = (ImageView) v.findViewById(R.id.imageViewHead); 


/ / fll id CSI/fL/? S A f8 ff 

editTextName = (EditText) v.findViewById(R.id.editTextName); 
// AR R BE E HIRET 

editTextName.setHint (" 请 输入 用 户 名 ") ; 


/ / TCSI EROR TEC Ell 
Button buttonLogin = (Button) v.findViewById (R.id.buttonLogin); 
// STAR. HUAVISÉNÉ)cClick Hf 
buttonLogin.setOnClickListener(new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
// JÆ Snackbar XJ 
Snackbar snackbar = Snackbar.make(v," "RART? ", 
Snackbar . LENGTH LONG); 
// BIREN 


snackbar.show(); 


testPropertyAnimator(); 


)); 


// PERRETH, IIR BL dr TE AS 
Button buttonRegister - (Button) v.findViewById(R.id.buttonRegister); 
buttonRegister.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
// HEBH&TIHBSCIATTRI WAIT Z 
FragmentManager fragmentManager = 
getActivity().getSupportFragmentManager (); 
FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 
RegisterFragment fragment = new RegisterFragment (); 
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//É f&fá FrameLayout FRA HI Fragment 
fragmentTransaction.replace(R.id.fragment container, fragment); 
/ / FEX OKA EB EP, HEP U EATR REN A IUS PEAR i 
fragmentTransaction.addToBackStack ("login"); 
fragmentTransaction.commit(); 


)); 


return V; 


) 


/ / lii EP 
public void testViewAnimation ()í 

// &l& —fEFEZIBI CABOS) 

RotateAnimation animation -new RotateAnimation(0.0f, 360f, 
Animation.RELATIVE TO SELF, 0O.5f, 
Animation.RELATIVE TO SELF, 0.5f); 

// WR BLÉ E EEIC,REVERSE RREA ARARA GJER) 

animation.setRepeatMode (Animation.RESTART); 

// QERA, 1000 Ø (AE EUNT EJ) 

animation.setDuration(1000); 

// RAER% 

animation.setRepeatCount (10); 

// REINTJE, ANNÆ RA. (GIIA? fef —u 


animation.setInterpolator(new LinearInterpolator()); 


// &l& —PIBUCEIIBI, Æ X A Y Lp EAM 0.5 £/1.5. 

ScaleAnimation scaleAnimation-new ScaleAnimation(0.5f,1.5f£,0.5f£,1.5£); 
SscaleAnimation.setRepeatMode (Animation.REVERSE); 
scaleAnimation.setDuration (2000); 

/ / BESIIBIC AA IK AINT LE 


scaleAnimation.setRepeatCount (animation.INFINITE); 


// EVEJ R, EREA A AGRA — IIBER 
AnimationSet animationSet-new AnimationSet(false); 
animationSet.addAnimation (animation); 
animationSet.addAnimation(scaleAnimation); 
animationSet.setStartOffset (1000); 


// BA (2z imageView) 
imageView.startAnimation(animationSet); 


) 


/ / A AA EZ 

public void testPropertyAnimator (){ 
// 8l&& — NDE E 
ObjectAnimator rotateAnimator = 

ObjectAnimator.ofFloat(imageView,"rotation",0.f,180.f); 

rotateAnimator.setDuration(1000); 
rotateAnimator.setRepeatCount (2) ; 
rotateAnimator.setInterpolator(new LinearInterpolator()); 
rotateAnimator.setRepeatMode (ValueAnimator. REVERSE); 


//&l&& — PB Em, x fü 


ObjectAnimator scaleAnimatorX - 
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ObjectAnimator.ofFloat(imageView,"scaleX",0.5f,1.5f); 
scaleAnimatorX.setDuration(1000); 
scaleAnimatorX.setRepeatCount (10) ; 
ScaleAnimatorX.setRepeatMode (ValueAnimator. REVERSE); 


// EJE VR, y fü 

ObjectAnimator scaleAnimatorY = 
ObjectAnimator.ofFloat(imageView,"scaleY",0.5f,1.5f); 

scaleAnimatorY.setDuration(1000); 

scaleAnimatorY.setRepeatCount (10); 

scaleAnimatorY.setRepeatMode (ValueAnimator.REVERSE); 


/ / 8l & — ZB ZH 

AnimatorSet animatorSet- new AnimatorSet(); 

animatorSet.play(scaleAnimatorX).with(scaleAnimatorY). 
after(rotateAnimator); 

animatorSet.start(); 


) 


QOverride 
public void onViewStateRestored(8Nullable Bundle savedInstanceState)( 
super.onViewStateRestored(savedInstanceState); 


/ / RAF EREIZ, MRA EI 
MainActivity activity = (MainActivity) getActivity(); 
if (activity != null) { 
if (activity.userName != null) { 
editTextName.setText (activity.userName); 


} 
if (activity.password !- null) { 
editTextPassword.setText (activity.password); 


我 们 可 不 可 以 像 设 计 界 面 那 样 , 在 资源 文件 中 定义 好 一 个 动画 , 然后 把 它 应 用 到 控件 上 呢 ? 


因为 我 们 想 尽 可 能 地 做 到 代码 与 设计 分 离 。 告 诉 你 一 个 好 消息 : 这 当然 可 以 ! 下 面 我 们 就 在 
XML 文件 中 定义 上 面 的 动画 组 ， 当 然 首 先 要 添加 一 个 资源 ， 如 图 10.5.1. B 10.5.2 所 示 。 
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iĝ Android 


Qt #- I (€ LoginFragment java x 


Caa eo 
> E 


» rc Link C++ Project with Gradle 


j E 96 Cut 
v © GE Copy 
G Copy Path 


G Copy as Plain Text 


[i [3 Paste 
P Find in Path... 


Replace in Path... 


f^ New Resource File 


File name: | test animate 


Resource type: 
Root element: 
Source set: 


Directory name: 
Available qualifie 
$3 Country Code 

@ Network Cod tz 
$9 Locale 

= Layout Direction 
53 Smallest Screen Width 
Screen Width 


C3 Module 

Ctrl X Android resource file 
Ctrl+C 

Ctrl+shift+C 


四 Android resource directory 
日 File 
[*3 Package 


Ctrl+V 国 C++ Class 
Ctri«Shift«F E C/C++ Source File 
es We C/C++ Header File 


图 10.5.1 


"oC Cancel - , Help 


10.5.2 


资源 文件 名 叫 “test_ animate”， 资 源 类 型 里 有 两 个 都 是 动画 ， 一 个 是 Animation, — 7€ 
Animator. 。 可 能 聪明 的 你 已 经 看 出 来 了 ， 这 两 个 名 字 正 好 对 应 ViewAnimation 和 
ObjectAnimator， 我 们 选择 属性 动画 吧 , 视图 动画 资源 与 之 大 同 小 异 。 点 OK 后 创建 如 图 10.5.3 


所 示 的 文件 。 


* [animator -— 


© test animate.xml 
> Ð drawable 
» © layout 
» © menu 


Q 
ml version="1.0" encoding-"utf-8"?» 
«set xmlns:android-"http://schemas.andra 


«/set» 


图 10.5.3 


注意 ， 在 res 下 多 了 一 个 文件 夹 “animator”， 动 画 资源 文件 位 于 此 文件 夹 下 面 。 如 果 我 
们 选择 创建 视图 动画 时 ， 会 创建 叫 作 “anim” 的 文件 夹 。XML 文件 的 内 容 默 认定 义 了 根 元 系 
“set”， 它 表示 动画 组 ， 所 以 Android Studio 希望 我 们 使 用 动画 组 来 定义 动 男 ， 这 其 实 也 没 什 
么 问题 ， 因 为 即使 你 只 想 定义 一 个 动画 ,动画 组 里 放 一 个 动画 也 没 问题 啊 。 当 然 你 如 果 只 定义 
一 个 动画 ， 完 全 可 以 不 用 动画 组 。 下 面 我 们 加 动画 组 中 添加 动画 ， 直 接 上 代码 : 
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android:ordering-"sequentially"»«!-- A&A/IBITZ m X MUT fik 28 -—» 
«objectAnimator 


android:propertyName-"rotation" 
android:duration-"1000" 
android:valueFrom-"Of" 
android:valueTo-"180f" 
android:repeatCount-"10" 
android:repeatMode-"restart"/» 
<I -RRRA  IH I T--—- 
«set android:ordering-"together"» 
«objectAnimator 
android:propertyName-"scaleX" 
android:duration-"1000" 
android:valueFrom-"0.5f" 
android:valueTo-"1.5f"/» 
«objectAnimator 
android:propertyName-"scaleY" 
android:duration-"1000" 
android:valueFrom-"0.5f" 
android:valueTo-"1.5f"/» 
«/set» 
«/set» 


代码 中 ， 外 层 动画 组 Cet? 的 android:ordering 指明 其 所 包含 的 动画 们 是 同时 执行 还 是 依 
次 执行 ， 当 前 值 是 “sequentially”， 表 示 顺 序 执行 。 最 外 层 动画 组 元 素 中 包含 了 两 个 元 素 : 一 
个 旋转 动画 和 另 一 个 动画 组 。 这 个 子 动画 组 中 又 包含 了 两 个 元 素 ， 一 个 横 回 缩放 动画 ， 一 个 纵 
向 缩放 动画 ， 且 这 两 个 动画 的 执行 顺序 是 “together” 同 时 执行 。 总 的 来 说 就 是 定义 了 三 个 动 
画 ， 第 一 个 先 执行 ， 完 成 后 两 个 一 起 开始 执行 ， 跟 我 们 用 纯 代 码 定义 的 一 样 。 对 于 XML 代码 
就 不 做 过 多 解释 了 ， 对 比 Java 代码 很 容易 就 看 明白 了 。 

注意 你 不 能 在 这 里 指定 动画 要 动 哪个 控件 , 因为 放 在 资源 中 的 目的 就 是 提供 重用 性 , 你 可 
以 定义 复杂 的 动画 ， 然 后 在 代码 中 把 它 应 用 到 不 同 的 控件 上 ， 怎 样 在 代码 中 使 用 动画 资源 呢 ? 
见 下 面 代码 : 
/ / BM ERUR SCELTE MEAE 


private void testAnimateResource() { 


// HH AnimatorInflater M H WR MŽ; 
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator( 


getContext(), R.animator.test animate); 
// RUR PHRA TBAEAXII SEI SIFNIBÍELE, BEL EERX TEE. 
set.setTarget (imageView); 
set.start(); 


代码 没什么 可 解释 的 。 如 果 你 感觉 看 不 明白 ， 其 实 是 很 可 能 你 在 读 源 码 时 犯 了 一 个 错误 ， 
看 代码 一 定 要 “ 观 其 大 略 ， 不 求 甚 解 ”， 即 不 要 太 奶 求 细 节 ， 理 解 其 流程 和 每 一 步 的 目的 是 第 
一 位 的 , 否则 你 就 学 得 很 慢 。 为 什么 呢 ? 这 个 理论 说 起 来 可 就 牛 了 , 所 以 我 就 不 说 了 , 因为 “ 牛 ” 
理论 部 是 说 不 清楚 的 ， 你 自己 体会 吧 。 
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前 面 讲 了 半天 控件 动画 ， 那 我 想 问 一 句 ， 你 能 不 能 在 同一 个 Layout 控件 中 添加 子 控件 时 
也 使 用 动画 呢 ? 当然 到 现在 为 止 我 们 还 没有 动态 问 Layout 中 添加 或 删除 过 控件 ， 因 为 我 们 都 
是 在 资源 文件 中 定义 Layout 的 子 控件 ， 要 想 动态 添加 或 删除 ， 需 要 用 Java 代码 实现 。 


10.6.1 向 Layout 控件 添加 子 控件 


我 们 首先 玩 一 下 动态 向 Layout 控 件 中 添加 子 控 件 。 就 拿 LoginFragment 中 的 RelativeLayout 
来 实验 吧 。 现 在 它 里 面 有 图 像 、 用 户 名 、 密 码 等 构成 登录 功能 的 核心 控件 们 ， 我 们 用 代码 再 创 
建 一 个 按钮 ， 然 后 添加 到 RelativeLayout 中 。 

因为 要 在 代码 中 操作 RelativeLayout， 所 以 先 为 它 指定 一 个 14， 就 叫 “layout” 吧 。 然 后 在 
LoginFragment 类 中 添加 保存 它 的 变量 : “RelativeLayout layout;” , FE onCreateView() 中 获 
取 这 个 控件 并 保存 到 变量 中 : “layout = (RelativeLayout) v.findViewById(R.id.layout);:”， 然 后 
就 可 以 调用 layoutaddView0 来 添加 子 控件 了 。 但 是 你 需 先 要 创建 一 个 子 控件 嘛 ， 我 们 创建 一 
个 Button， 然 后 添加 到 layout 中 ， 代 码 如 下 : 


// lid Layout zhi 
void testLayoutAnimate () { 
/ / Él && — SNEH 
Button btn-new Button(getContext ()); 
// BUE EA X 
btn.setText ("我 是 被 动态 添加 的 ") ; 
/ / Él £& -VHE R 
RelativeLayout.LayoutParams layoutParams - new RelativeLayout.LayoutParams( 
ViewGroup.LayoutParams.WRAP CONTENT, 
ViewGroup.LayoutParams.WRAP CONTENT); 
// ØEN LayoutParams (HREH HUTSTEZCIEZE ZHI FIAT 
layoutParams.addRule (RelativeLayout.BELOW,R.id.buttonRegister); 


/ / A XA TEM INITE 


layoutParams.addRule(RelativeLayout.ALIGN START,R.id.buttonRegister); 
/ IE TEM TEL TF 

layoutParams.addRule(RelativeLayout.ALIGN END,R.id.buttonRegister); 
// BINAE, S37. E. Bo FR. SERRCURUE KE INR- TEFIE 

//24 PRR, TER IBSIÉTEANIE dp. 

layoutParams.setMargins(0,24,0,0); 

/ PETIERE HH BETREUER P 

btn.setLayoutParams (layoutParams); 

// TEE SI RelativeLayout 办 

layout.addView (btn); 


可 以 看 到 回 一 个 layout 控件 中 添加 子 控件 并 不 是 那么 简单 ， 因 为 你 还 要 考虑 它 的 怎样 摆 
放 ， 设 置 一 个 控件 的 排版 方式 需要 用 到 LayoutParams 这 个 内 部 类 ， 各 Layout 类 中 都 有 这 个 内 
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部 类 ， 因 为 不 同 的 Layout 类 有 不 同 的 排版 参数 要 设置 。 我 们 依然 在 点 击 登录 按钮 时 调用 此 方 
法 : 


buttonLogin.setOnClickListener (new View.OnClickListener() { 


QGOverride 
public void onClick(View v) { 
testLayoutAnimate (); 
} 
)); 


运行 App， 你 会 发 现在 点 击 登录 按钮 后 ， 最 下 面 出 现 一 个 新 的 按钮 ， 同 时 会 引起 其 他 控件 
位 置 的 变化 ， 如 图 10.6.1.1 所 示 。 


图 10.6.1.1 


当然 ， 现 在 还 没有 动画 效果 ， 下 面 添加 动画 效果 。 其 实 很 简单 ， 你 只 需 在 layout 资源 文件 
中 为 RelativeLayout 添加 一 个 属性 : android:animateLayoutChanges="true"。 再 次 运行 App， 点 
登录 按钮 时 依然 会 添加 新 按钮 , 但 是 此 时 就 能 看 到 动画 了 : 先是 现 有 的 按钮 往 上 移 ， 为 新 按钮 
空 出 空间 ， 然 后 新 按钮 才 出 现 ， 它 出 现 的 过 程 也 有 一 个 从 无 到 有 的 动画 。 

属性 animateLayoutChanges 的 意思 是 “动画 排版 改变 ”， 它 为 true 时， 就 使 用 默认 动画 ， 
就 是 现在 我 们 看 到 的 。 但 是 ,我们 还 不 满足 ， 我 们 希望 玩 一 些 不 同 的 动画 ， 比 如 让 一 个 控件 出 
现时 “ 浪 ” 一 点 。 那 么 我 们 就 需要 上 自 定 义 排 版 动画 ， 下 节 分 解 。 


10.6.2 ViewGroup 


在 自 定义 排版 动画 之 前 ， 大 家 要 明确 一 个 概念 : ViewGroup。 

它 是 一 个 类 ,这 个 类 属于 控件 类 , 但 这 种 控件 类 的 特点 是 可 以 容纳 多 个 子 控件 。 实际 上 能 
包含 子 控件 的 控件 们 都 是 从 ViewGroup 派生 的 ， 而 ViewGroup 又 是 从 View 派生 的 ， 所 以 
ViewGroup 依然 是 控件 。 各 种 Layout 控件 能 包含 子 控件 , 因为 它们 就 是 从 ViewGroup 派生 的 ， 
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ScrollView 也 能 包含 子 控件 ， 它 也 是 从 ViewGroup 派生 的 ， 后 面 要 讲 的 列表 控件 ListView 和 
RecyclerView 也 是 从 ViewGroup 派生 的 。 所 有 从 ViewGroup 派生 的 类 都 支持 排版 动画 。 

排版 动画 是 在 ViewGroup 中 子 控件 的 排版 变化 时 发 生 的 ， 比 如 添加 或 删除 子 控件 时 。 因 
为 一 下 就 显示 出 来 让 人 感觉 一 惊 一 乍 的 ， 所 以 要 加 入 动画 的 过 程 ， 从 而 做 一 个 有 修养 的 Appo 

首先 要 搞 明 白 ViewGroup 排版 动画 的 原理 。 一 个 控件 在 ViewGroup 中 出 现 或 消失 时 ， 这 
个 显示 或 消失 的 过 程 要 有 动画 , 同时 它 还 影 啊 到 了 其 他 控件 的 位 置 , 他 们 的 位 置 变化 也 要 有 动 
男 。 你 要 告诉 ViewGroup 这 些 不 同 的 变化 所 执行 的 动画 。 所 以 ， 你 最 多 可 以 为 ViewGroup ix 
置 五 个 动画 对 象 ， 分 别 是 对 应 : 


@ CHANGE APPEARING: 当 某 个 控件 出 现时 ， 其 他 控件 们 执行 的 动画 。 
CHANGE DISAPPEARING: 当 某 个 控件 消失 时 ， 其 他 控件 们 执行 的 动画 。 
APPEARING: 某 个 控件 出 现时 执行 的 动画 。 

DISAPPEARING: 某 个 控件 消失 时 执行 的 动画 。 

CHANGING: 控件 出 现 或 消失 之 外 的 原因 引起 的 排版 变化 时 执行 的 动画 。 


你 可 以 不 必 设 置 所 有 变化 所 对 应 的 动画 , 不 设置 就 用 默认 动画 。 注意 这 些 动画 不 一 定 都 能 
起 作用 ， 比 如 CHANGE APPEARING 和 CHANGE DISAPPEARING 在 大 部 分 ViewGroup 控 
件 中 就 不 起 作用 。 

要 想 设 置 这 些 动画 给 ViewGroup, 首先 你 需要 创建 对 应 的 动画 对 象 , 然后 把 动画 对 象 设置 
给 一 个 LayoutTransition 对 象 ， 然后 把 LayoutTransition 对 象 设置 给 ViewGroup。 注 意 给 排版 用 
的 动画 ， 只 能 是 属性 动画 ， 而 不 是 视图 动画 。 下 节 我 们 就 用 代码 实现 一 下 。 


10.6.3 ”设置 排版 动画 
先 上 代码 : 


void testLayoutAnimate () { 

/ / Él & — EFE 

Button btn-new Button(getContext()); 

// RE EBRA 

btn.setText (" 我 是 被 动态 添加 的 ") ; 

/ / JÆ — PIER S ZION R 

RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams( 
ViewGroup.LayoutParams.WRAP CONTENT, 
ViewGroup.LayoutParams.WRAP CONTENT); 


//fü/liX-^LayoutParams (HAKA ) KIFE TED TEM fi FII 
layoutParams.addRule (RelativeLayout.BELOW,R.id.buttonRegister); 
// AI REPAS TF 


layoutParams.addRule(RelativeLayout.ALIGN START,R.id.buttonRegister); 
/ EIE ZUAI TF 

layoutParams.addRule (RelativeLayout.ALIGN END,R.id.buttonRegister); 
// RBAINISEL, SX MSE. E. d. Fo SUERRCRDOB IS BEIWBI SPEM ACERTHER 


layoutParams.setMargins(0,24,0,0); 
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NETZE TTD EDITT. 


btn.setLayoutParams (layoutParams); 


IB Layout zj 


LayoutTransition transition - new LayoutTransition(); 

// 35 —NEBTEULBIBT, JOE EHE NSPIL ERI 

/ / HHA AnimatorInflater M WRM 

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator( 
getContext(), R.animator.test animate); 


// REE ABRI HII 

transition.setAnimator (LayoutTransition.APPEARING, set); 

// RE -VIRAR Ahit tth EREKE 
transition.setDuration(LayoutTransition.CHANGE APPEARING, 4000); 
//1& ES ZB LayoutTransition WR ig Bi $/viewGroup FEAF 
layout.setLayoutTransition (transition); 


layout.addView (btn); 


在 方法 testLayoutAnimate() 中 增加 了 设置 动画 的 代码 。 可 以 看 到 依然 使 用 了 
test_animate.xml 这 个 动 男 资源 ， 把 动画 应 用 到 了 控件 出 现时 。 如 此 一 来 ， 新 按钮 的 出 现 过 程 
变 得 相当 的 不 正经 ， 你 可 以 运行 App 体验 一 下 。 我 们 还 把 其 他 子 控件 移动 位 置 的 时 长 设置 成 
了 4000 上 毫秒， 此 时 你 可 以 看 到 新 按钮 一 边 风 骚 地 出 现 ， 其 他 的 控件 一 边 给 它 腾 人 位置。 注意 ， 
只 要 在 代码 中 为 ViewGroup 设置 了 LayoutTransition， 就 可 以 把 XML 中 为 控件 添加 的 属性 
animateLayoutChanges Xf f. "nk 10.6.3.1 所 示 。 


注册 


90 S^ SP E 


10.6.3.1 
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转 场 动画 


前 面 讲 了 好 多 种 动画 ， 那 我 问 个 问题 ， 能 不 能 利用 所 学 的 动画 摘出 两 个 Activity 切换 时 的 
动画 ? 或 两 个 Fragment 切换 时 的 动画 ? 其 实 你 是 搞 不 出 来 的 , 因为 Activity 或 Fragment 都 不 
是 控件 。 那 么 它们 之 间 的 切换 动画 创建 方式 就 不 同 ， 而 且 这 种 动画 叫 转 场 动 画 。 

实际 上 Activity 的 切换 默 入 已 经 使 用 了 转 场 动画 ,这 个 凡是 用 Android 系统 的 人 都 有 体会 ， 
而 Fragment 的 切换 默认 是 没有 动 男 的 。 那 么 我 们 就 为 Fragment 的 切换 添加 转 场 动画 。 


10.7.1 使 用 默认 转 场 动画 


启用 默认 转 场 动画 ， 需 要 为 控制 Fragment 切换 的 对 象 开启 一 些 设置 。 找 到 切换 Fragment 
的 代码 ， 在 哪里 呢 ? 在 LoginFragment 的 注册 按钮 响应 方法 中 。 
要 局 用 默认 动画 ， 只 需 一 句 代 码 ， 如 下 : 


buttonRegister.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
/ / SREM AABE IIA 
FragmentManager fragmentManager = 
getActivity().getSupportFragmentManager (); 
FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 
RegisterFragment fragment = new RegisterFragment(); 


// ËH FrameLayout PHRA Fragment 
fragmentTransaction.replace(R.id.fragment container, fragment); 
/ / FEX UIAOA EABIET, IEP DUE ATB REN A AIR [n] E -FRK 


fragmentTransaction.addToBackStack ("login"); 
// RE Fragment Hz, EARN zum 
fragmentTransaction.setTransition(FragmentTransaction. 
TRANSIT FRAGMENT OPEN); 
fragmentTransaction.commit (); 
} 
)); 


这 一 句 : fragmentTransaction.setTransition(FragmentTransaction. TRANSIT FRAGMENT OPEN); 
就 为 Fragment 切换 增加 了 动画 功能 。 不 仅仅 去 时 有 动画 , 回来 时 也 有 动画 ,fragmentTransaction 
就 是 负责 Fragment 切换 的 ， 所 以 通过 它 启用 动 夯 。 参 数 是 四 个 常量 值 ， 代 表 了 系统 内 置 的 各 
种 转 场 动画 : 

@ TRANSIT NONE: 没有 动画 。 

€ TRANSIT FRAGMENT OPEN: 打开 动画 。 

€ TRANSIT FRAGMENT CLOSE: 关闭 动画 。 

€ TRANSIT FRAGMENT FADE: 渐 入 淡出 动画 。 
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不 论 你 设置 了 哪 种 动画 ， 去 和 回 自 动 反 着 来 ， 这 个 一 试 就 知道 ， 马 上 运行 App 看 看 吧 ， 
别 筷 了 点 注册 按钮 才 会 切换 到 注册 页 面 。 


10.7.2 目 定 义 转 场 动画 


我 们 不 是 那么 容易 满足 ， 我 们 想 与 众 不 同 。 可 不 可 以 目 定 义 转 场 动画 呢 ? 当然 没 问 题 ! 
FragmentTransaction 有 两 个 重 载 方法 : 


看 名 字 就 知道 ， 这 个 方法 用 于 设置 自 定 义 动画 。 假设 从 A 切换 到 B， 参 数 enter 是 进入 B 
时 的 动画 ， 参 数 exit 是 退出 A 时 的 动画 。 如 果 只 设置 了 这 两 个 动画 ， 那 么 在 从 B 返回 A 时 就 
没有 动画 。 如 果 还 设置 了 参数 popEnter 和 popExit， 那 么 从 B 返回 A 时 ，A 执行 popEnter，B 
执行 popExit。 

注意 参数 前 的 注解 @AnimRes, 它 并 不 是 参数 的 一 部 分 , 它 是 用 于 提高 IDE 的 感知 能 力 的 ， 
同时 也 是 给 人 看 的 , 根据 其 名 字 可 以 判断 出 它 修饰 的 参数 是 一 个 动画 资源 , 而且 这 个 动画 必须 
是 View 动画 ，AnimRes 是 Anim Resource 的 缩写 ，View 动画 放 在 anim 组 下 ， 所 以 我 们 就 知 
道 回 方法 中 传 入 的 必须 是 View 动画 。 实 际 上 我 们 的 判断 没 错 ， 我 们 使 用 的 是 Support 库 中 的 
Fragment， 它 文 持 的 转 场 动画 必须 是 View 动画 ， 这 样 才 能 与 低 版 本 系统 兼容 。 由 于 存在 这 个 
注解 ， 你 在 代码 中 辣 此 方法 传 入 的 如 果 不 是 View 动画 资源 ，IDE 就 会 提示 错误 。 

我 们 应 使 用 有 四 个 参数 的 方法 ， 因 为 我 们 有 去 有 回 ， 所 以 需 先 准备 四 个 动画 资源 。 我 想 做 
这 样 的 动画 : 进入 的 页 面 旋转 着 由 小 变 大 出 现 , 离开 的 页 面 从 左 同 右 移 走 ， 返回 时 离开 的 页 面 
旋转 着 由 大 变 小 消失 ， 进 入 的 页 面 从 右 问 左 移出 来 ， 对 应 的 动画 资源 分 别 是 in animl.xml, 
in anim2.xml、out animl.xml, out anim2.xml， 先 添加 它们 。 在 项 目 树 的 根 上 点 出 右键 菜单 ， 
选择 创建 资源 文件 ， 前 面 讲 过 多 次 了 ， 此 处 不 再 叫 叫 ， 如 图 10.7.2.1 所 示 。 


File name: in_anim1 


Resource type: Animation 


Root element: 


Source set: 


Directory name: | anim 


Available qualifiers: Chosen qualifiers: 
$3 Country Code 


t» Network Code m— | | 
Q9 Locale Nothing to show 


ix Layout Direction s | 
2 Smallest Screen Width 
© Screen Width 


|o 上 < Help | 


10.72.1 
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注意 资源 类 型 要 选 Animation 而 不 是 Animator， 因 为 Animation 是 View 动画 。 创 建 之 后 ， 
在 res 下 出 现 了 anim 组， 其 下 有 四 个 资源 文件 ， 如 图 10.7.22 所 示 。 


kà in anim1.xml 
3 in anim2.xml 
kà out anim1.xml 
kè out anim2.xml 


[*1 animator 
kà test animate.xml 
[*1 drawable 
[*1 layout 
B menu 
[*1 mipmap 
© values 


10.7.2.2 


in animl.xml 是 从 登录 页 面 进入 注册 页 面 时 ， 注 册页 面 要 执行 的 动画 。 
out animl.xml 是 从 登录 页 面 进入 注册 页 面 时 ， 和 登录 页 面 执行 的 动画 。 
in anim2.xml 是 从 注册 页 面 返回 登录 页 面 时 ， 登 录 页 面 要 执行 的 动画 。 


e 
* 
* 
€ out anim2.xml 是 从 注册 页 面 返回 登录 页 面 时 ， 注 册页 面 要 执行 的 动画 。 


(1) in animl.xml: 


<?xml version-"1.0" encoding-"utf-8"?» 
«set xmlns:android-"http://schemas.android.com/apk/res/android" 
android:interpolator-"8android:anim/decelerate interpolator"» 
«1--£—f8--» 
«rotate 
android:fromDegrees-"0" 
android:toDegrees-"360" 
android:pivotX-"50*2" 
android:pivotY-"50$" 
android:duration-"1000" /» 
c1 MRRÁ--» 
«scale 
android:fromXScale-"0.0" 
android:toXScale-"1.0" 
android:fromYScale-"0.0" 
android:toYScale-"1.0" 
android:pivotX-"50$" 
android:pivotY-"50$" 
android:duration-"1000" 
android:fillBefore-"false" /» 
«/set» 


属性 android:interpolator 指定 了 插值 函数 ，decelerate_interpolator 是 先 加 速 再 减速 的 函数 。 
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(2) out animl.xml: 


<?xml version-"1.0" encoding-"utf-8"?» 
«1-- f ÉEZIBI--» 
«translate xmlns:android-"http://schemas.android.com/apk/res/android" 


android:interpolator-"G8android:anim/accelerate interpolator" 


android:fromXDelta-"0" 

android:toXDelta-"100$p" 

android:duration-"1000"» 
«/translate» 


fromXDelta="0" 表 示 在 横向 上 从 0 位 置 开始 移动 ，toXDelta="100%p" 表 示 移 动 100%% FE 
的 距离 ， 即 回 右 移动 。 


(3) in anim2.xml: 


«translate xmlns:android-"http://schemas.android.com/apk/res/android" 
android:interpolator-"Q(android:anim/accelerate interpolator" 
android:fromXDelta-"1005$p" 
android:toXDelta-"0" 
android:duration-"1000"» 

«/translate» 


问 左 移动 。 


(4) out anim2.xml: 


«set xmlns:android-"http://schemas.android.com/apk/res/android" 
android:interpolator-"G8android:anim/decelerate interpolator"» 
«t--RIBIFE— HI 
«rotate 
android:fromDegrees-"0" 
android:toDegrees-"-360" 
android:pivotX-"50*2" 
android:pivotY-"50*2" 
android:duration-"1000" /» 

Ci MAA 

<scale 
android:fromXScale-"].0" 
android:toXScale-"0.0" 
android:fromYScale-"].0" 
android:toYScale-"0.0" 
android:pivotX-"50*2$" 
android:pivotY-"50$" 
android:duration-"1000" 
android:fillBefore-"false" /» 


也 可 以 为 登录 页 面 的 初次 出 现 添 加 动画 。 登 录 Fragment 是 第 一 个 被 添加 的 ， 它 是 被 add 
上 的 ， 如 图 10.7.2.3 所 示 。 
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//41$38 — Fragment (EE xrragment) ÝAActivity F 


FragmentManager fragmentManager = getSupportFragmentManager(); 
FragmentTransaction fragmentTransaction - fragmentManager.beginTransaction(); 
LoginFragment fragment - new LoginFragment(); 


fragmentTransaction. add Sei gent conten fragment); 


fragmentTransaction.commit(); 


图 10.7.2.3 
但 你 依然 可 以 在 add 之 前 设置 动画 。 代 人 码 如 下 : 


FragmentManager fragmentManager = getSupportFragmentManager(); 
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); 
LoginFragment fragment = new LoginFragment (); 


// RE Fragment HHA GA, fEA ETE X ZI, MATE Fragment KERET Bj 
fragmentTransaction.setCustomAnimations (R.anim.in animl,R.anim.out animi); 
fragmentTransaction.add(R.id.fragment container, fragment); 
fragmentTransaction.commit (); 


再 次 运行 你 的 App， 你 会 看 到 登录 页 面 华丽 丽 的 登场 过 程 。 
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我 想 再 为 登录 界面 增加 一 个 效果 : 圆 形 头 像 ， 如 图 11.1 所 示 。 


11.1 


就 是 不 论 什 么 样 的 图 像 ,我 都 把 它 剪 切 成 圆 形 ， 然 后 外 面 再 套 个 圈 。 到 现在 为 止 , Android 
SDK 中 上 自 带 的 View 还 没有 一 个 能 显示 这 种 效果 ,所 以 只 能 上 自己 搞 , 这 就 需要 创建 一 个 “Custom 
View" o 

但 实际 上 Android 提供 了 一 个 帮助 显示 圆 形 图 像 的 类 ， 叫 作 RoundedBitmapDrawable， 但 
是 它 只 能 显示 圆 形 图 像 , 不 能 套 圈 。 这 个 类 用 起 来 也 不 难 , 首先 是 创建 RoundedBitmapDrawable 
的 实例 ， 调 用 其 构造 方法 时 需要 传 入 一 个 Bitmap 实例 ， 然 后 设置 它 的 圆 角 半径 即 可 。 代 码 如 


RoundedBitmapDrawable roundedBitmapDrawable = 


RoundedBitmapDrawableFactory.create(getResources(), bitmap); 
roundedBitmapDrawable.setCornerRadius (100); 


我 们 可 以 尝试 用 它 把 登录 页 面 的 人 头 改 成 圆 的 , 注意 无 法 在 界面 设计 占 中 使 用 这 个 类 , 所 
以 必须 通过 代码 使 用 它 。 代 人 码 如 下 : 


// SC IRIS 

ImageView imageView-v.findViewById(R.id.imageViewHead); 

//M Drawable RHK Bitmap, Er LÆRI Xf LEES Bitmap HR 

Bitmap src - BitmapFactory.decodeResource(getResources(), R.drawable.female); 


F INIZ DAs m — ^ É- Th 7^ 3 ^ — —— — 了 一 4. f; 
/ / EY Æ RoundedBi1itma pDr awabie WR 


RoundedBitmapDrawable roundedBitmapDrawable = 
RoundedBitmapDrawableFactory.create(getResources(), src); 

// VE BEIAB- E RELER?) 

roundedBitmapDrawable.setCornerRadius (100); 

// Ñ Drawable I EZ? ImageView E., QA mr PAI IE TT AS PHI TE ELT 


imageView.setlImageDrawable (roundedBitmapDrawable); 


把 这 段 代 码 放 在 页 面 显 示 之 前 比较 好 ， 所 以 放 在 了 LoginFragment 的 onCreateView()7; iX: 
中 。 运 行 App， 效 果 如 图 11.2 所 示 。 可 以 看 到 图 像 被 明显 的 剪 切 成 了 圆 形 ， 但 是 效果 并 不 好 ， 


第 11 章 ” 自 定义 控件 


如 果 找 一 个 有 背景 的 图 像 ， 效 果 就 明显 了 ， 比 如 图 11.3。 


请 输入 用 户 名 


图 11.2 图 11.3 
最 终 效果 如 图 11.4 所 示 。 由 于 图 像 太 大 ,而 我 们 现在 把 圆 角 的 半径 设置 为 100， 所 以 这 个 
图 像 只 是 圆 角 而 不 是 一 个 圆 ， 当 把 圆 角 半 径 设置 为 图 像 边 长 的 一 半 时 ， 融 成 了 圆 ， 比 如 我 把 圆 
角 半 径 设置 成 400 时 ， 效 果 如 图 11.5 所 示 。 


> " EtA 
请 输入 用 户 名 请 输入 用 尸 名 


11.4 图 11.5 
如 果 你 不 知道 一 个 图 像 的 大 小 , 你 也 可 以 通过 代码 获取 这 个 图 像 的 宽 或 高 , 如 果 图 像 不 是 
方形 ,就 取 最 小 的 边 长 然后 除 以 2 作为 圆 角 半 径 即 可 。 你 仔细 看 圆 的 边缘 的 话 ， 发 现 有 锯齿 存 
在 ， 你 可 以 加 入 反 锯齿 特效 ， 代 码 如 下 : 
// BLA EE CE SCENEAK) 


roundedBitmapDrawable.setCornerRadius (400); 


// WELTEN 


roundedBitmapDrawable.setAntiAlias(true); 


Bi, RRAZ EEA, MARIER FA EAI. 


创建 一 个 Custom View 


创建 一 个 Custom View (〈 目 定义 控件 ) ， 需 要 直接 或 间接 从 类 View 派生 一 个 子 类 ， 然 后 
Override 父 类 中 的 一 些 方法 ， 以 实现 不 同 的 行为 或 外 观 。 人 但是， 如果 仅 仅 这 样 做 ， 那 么 这 个 类 
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只 适合 在 代码 中 使 用 ,不 能 在 界面 构建 器 中 使 用 。 如 果 要 在 界面 设计 器 中 使 用 ， 你 需要 实现 一 
个 特殊 的 构造 方法 。Android Studio 为 我 们 提供 了 创建 自 定 义 探 件 的 问 导 ， 使 用 这 个 同 导 ， 创 
建 出 来 的 控件 类 就 可 以 在 界面 设计 器 中 使 用 。 下 面 我 们 就 创建 一 个 Custom View. 

在 项 目 树 的 根 上 点 出 右键 菜单 ， 选 择 new—UI Component^ Custom View ， 如 图 11.1.1 


所 示 。 


出 现 一 个 对 话 框 ， 在 其 中 配置 类 名 、 包 名 等 ， 如 图 11.1.2 所 示 。 


Creates a new custom view that extends android.view.View and exposes custom attributes. 


:app TC © s: c- 
> Ema 


> B jav 
» -res It 
®© Gradle Copy 
Copy Path 
Copy as Plain Text 
mi Paste 
Find in Path... 
Replace in Path... 
Analyze 
Refactor 
Add to Favorites 
Show Image Thumbnails 
Reformat Code 
Optimize Imports 
Local History 
Git 
G5 Synchronize 'app' 
Show in Explorer 
Directory Path 
11/1/20 ÉÈ Compare With... 


| acad Open Module Settings 


4:59PM — Update Copyright... 


© create Gist... 


Package name 


| niuedu.com.andfirststep 


View Class 


Link C++ Project with Gradle 


Ctrit A 
Cul-c 


Ctrl Shift -- C 


Ctrl+V 
Ctrl+Shift+F 
Ctrl+Shift+R 

b 

Ld 

b 

Ctrl Shift-- T 
Ctrl-Alt«L 
Ctrl - Alt--O 
H 

> 


Ctrl+Alt+F12 
Ctrl+D 
F4 


i | 7:59 PM MUR AARAR JI MO IT A 一 一 


Z Module 
æ Kotlin File/Class 
x». Android resource file 
Android resource directory 
Sample Data directory 
= File 


S, Scratch File — Ctrl«Alt«Shift «Insert 


Package 


s C++ Class 

c C/C++ Source File 
n- C/C++ Header File 
iĝ Image Asset 


'& Vector Asset 

gs Singleton 
Edit File Templates... 

Ñ AIDL 

iW Activity 

iĝ Android Auto 

'- Folder 

il! Fragment 

® Google 

iP Other 

iĝ Service 


Ul Component » 


» [4 Notification 


droid.applice 


26 
'26.0.2' 


"niuedu.com. 
14 
ion 25 


1.9" 
tationRunner 


bled false 
iles getDefa 


include: ['*. 
e('com.andro 


Custom View 


| RoundimageView 
Source Language N 


| Java 


Target Source Set 


| main 


图 11.1.2 


我 为 Custom View 类 取 名 RoundImageView， 点 Finish。 此 时 会 创建 多 个 文件 ， 首 先是 类 
文件 ， 如 图 11.1.3 所 示 。 其 次 是 res/layout/sample round image view.xml ， 接 着 是 
res/values/attrs round image view.xml。 这 两 个 文件 的 作用 后 面 再 讲 ， 我 们 先 研究 一 下 类 。 
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dici RoundImageView | 
Y M manifests | 


kð AndroidManifest.xml 
Y m java 


package niuedu.com.andfirsts 


+import ... 
niuedu.com.andfirststep 


'€ b LoginFragment 13 /** 

'€ * MainActivity 14 * TODO: document your custo 

加 è Musiclnfo 15 9 

© * MusicListFragment 

'€ ò RegisterFragment 

€. è RoundlmageView 

eo testen My N 

'€ * TestFragmentActiNityFragmer 25 
> |E niuedu.com.andfirststep (androidTe 


private Drawable mExamp 


private TextPaint mTextF 


əs- Custom View 类 
下 面 讲 一 下 这 个 类 的 重要 的 几 个 点 。 


11.2.1 构造 方法 


的 ， 如 果 不 在 界面 构建 器 中 使 用 这 个 View， 那 有 这 一 个 就 够 了 了。 第 二 个 是 在 界面 构建 部 中 使 
用 时 被 调用 。 你 可 以 想像 一 下 ， 在 界面 设置 器 中 我 们 可 以 为 View 指定 很 多 属性 ， 在 运行 时 最 
终 还 是 会 调用 构造 方法 来 创建 View 的 实例 ， 那 么 问题 来 了 ， 我 们 设置 的 那些 属性 是 怎么 传 入 
的 呢 ? 通 过 setter 方法 吗 ? 不 对 ， 因 为 很 多 属性 并 没有 对 应 的 setter 方法 ， 那 么 是 通过 什么 呢 ? 
就 是 通过 构造 方法 的 参数 : AttributeSet attrs。 第 三 个 构造 方法 什么 时 候 用 呢 ? 由 你 决定 ， 反 正 
界面 构建 器 中 用 不 到 它 ， 它 的 第 三 个 是 参数 defStyle 比较 让 人 迷惑 ， 这 里 稍微 解释 一 下 : 它 是 
一 个 style 资源 的 id， 这 个 Style 中 规定 了 View 的 一 些 外 观 属性 的 默认 值 。 比 如 下 面 这 个 style 
资源 定义 了 Button 这 种 View 的 一 些 默 认 属 性 : 
«style name-"Widget.Holo.Button" parent-"Widget.Button"» 
«item 
name-"android:background"»8android:drawable/btn default holo dark«/item» 
«item 
€———————— ——— A E EA 
<item 


name-"android:textColor"»Q8android:color/primary text _ holo dark</item> 
<item name="android:minHeight">48dip</item> 


<item name="android:minWidth">64dip</item> 
</style> 


构造 方法 是 干什么 用 的 ? 当然 是 初始 化 对 象 用 的 , 注意 看 这 三 个 构造 方法 , 都 调用 了 同一 
个 方法 : init0。 因 为 它们 三 个 里 面 要 做 的 工作 都 差不多 ， 所 以 提取 到 了 这 部 分 代码 到 一 个 单独 
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的 方法 中 ， 以 提高 可 维护 性 。init0， 一 看 名 字 就 知道 是 初始 化 的 意思 ， 那 么 这 里 面 究 竟 做 了 什 
么 呢 ? 要 明白 它 做 了 什么 ， 其 实 应 该 先 看 另外 一 个 方法 : onDraw0， 因 为 init0 中 做 的 事情 基本 
都 是 为 onDrawO0 的 执行 作 准备 。 


public class RoundImageView extends View { 
private String mExampleString; // : use a default from R.string... 
private int mExampleColor = Color.RÉRQ; // TODO: use a default from R.colo 
private float mExampleDimension = 0; Xy TODO: use a default from R.dimen.. 
private Drawable mExampleDrawable; 


private TextPaint mTextPaint; 
private float mTextWidth; 
private float mTextHeight; 


public RoundlImageView(Context context) [| 
super(context); 
init( attrs: null, defStyle: Ə); 


] Pi 
public RoundImageView(Context context, AttributeSet attrs) { 


super(context, attrs); 
init(attrs, defStyle: 6) ; 


} 


public RoundlImageView(Context context, AttributeSet attrs, int defStyle) [| 
super(context, attrs, defStyle); 
init(attrs, defStyloe); 


} 


11.2.1.1 


11.2.2 onDraw() 方 法 


像 这 种 onXXXO0O 名 字 的 方法 叫 作 回调 方法 。 所 谓 回调 方法 ， 就 是 你 写 的 但 目 己 不 用 而 是 
被 别人 调用 的 方法 。 比 如 这 个 onDraw0， 它 的 意思 是 当 “ 画 ”的 时 候 调 用 ， 男 什么 呢 ? 8 
件 的 外 观 啊 ， 控件 长 什么 样 就 是 这 个 方法 决定 的 ， 那么 这 个 方法 被 谁 调用 昵 ?” 被 Android 系统 
调用 ，Android 系统 感到 需要 重新 男 这 个 控件 的 时 候 就 调用 它 。 那 什么 时 候 Android 系统 才 感 
觉 需要 重新 画 一 个 控件 呢 ? 比如 一 个 控件 被 别 的 控件 挡住 了 , 遮挡 物 离开 时 ; 再 比如 当 你 按 下 
一 个 按钮 , 它 要 显示 “ 按 下 ”的 状态 时 ;再 再 比如 你 改变 了 一 个 控件 中 的 文本 内 容 时 ;再 再 再 ……… 

这 个 方法 长 这 样 : protected void onDraw(Canvas canvas), 有 一 个 参数 canvas, 画布 的 意思 ， 
也 就 是 说 要 男 出 控件 的 外 观 ， 就 在 这 个 画布 上 男 。 在 此 要 多 说 一 句 ， 回调 函数 能 不 能 日 己 调用 
呢 ? 能 ! 在 语法 上 绝对 没 问 题 ， 但 是 这 个 onDraw0 就 不 能 自己 调用 ， 主 要 是 参数 的 问题 ， 参 
数 canvas 是 根据 系统 信息 创建 出 来 的 ， 它 里 面 有 太 多 的 信息 ， 我 们 目 己 构建 的 话 容易 出 问题 。 
还 有 调用 的 时 间 ， 这 个 方法 每 次 调用 都 会 引起 重新 画 控件 ， 这 个 过 程 比 较 耗 时 ， 所 以 不 应 该 在 
不 必要 的 时 候 随 便 调 用 它 。 实 际 上 如 果 你 真 的 要 重新 男 控件 的 话 ， 应 该 调用 方法 invalidate() 
发 出 一 个 请 求 ， 而 不 是 直接 调用 onDraw(). 

下 面 先 看 一 下 这 个 控件 的 外 观 ， 如 图 11.2.2.1 所 示 。 
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AndFirstStep 


11.22.1 


注意 这 是 在 预览 中 的 样子 ， 跟 真实 运行 时 也 没有 什么 差别 。 中 间 显 示 文 本 ， 也 显示 了 一 个 
图 像 ， 其 背景 为 灰色 。 下 面 我 们 看 一 下 怎样 在 onDraw0 方 法 里 画 出 这 样 的 外 观 的 。 代 码 如 下 : 


QOverride 
protected void onDraw(Canvas canvas) { 
super .onDraw (canvas); 


// &IKf?TE FF FEA padding, HID 分 WHI 
int paddingLeft = getPaddingLeft(); 

int paddingTop - getPaddingTop(); 

int paddingRight = getPaddingRight (); 

int paddingBottom = getPaddingBottom(); 


/ / tR AR TUR 
int contentWidth = getWidth() - paddingLeft - paddingRight; 
int contentHeight - getHeight() - paddingTop - paddingBottom; 


/ / EIAS EGE, IT TSÍEÉEDPPRA 

canvas.drawText (mExampleString, 
paddingLeft + (contentWidth - mTextWidth) / 2, 
paddingTop + (contentHeight + mTextHeight) / 2, 
mTextPaint); 


/ IETETEBI FR IR, ITA RUE IBI, Pr B EE XC LE IBI 
if (mExampleDrawable != null) { 
mExampleDrawable.setBounds (paddingLeft, paddingTop, 
paddingLeft + contentWidth, paddingTop + contentHeight); 
mExampleDrawable.draw (canvas); 


首先 是 获取 控件 的 上 下 左右 的 Padding〈 空 白 距离 )， 以 计算 内 容 区 范围 。 下 面 确实 用 它 
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来 计算 了 内 容 区 的 宽 和 高 ， 那 么 控件 的 内 容 ( 文 本、 图 像 等 ) 在 显示 时 就 不 能 超出 这 个 范围 。 
然后 在 画布 canvas 上 男 出 了 文本 。drawText0 这 个 方法 有 四 个 参数 ， 第 一 个 是 要 男 的 字符 串 ， 
第 二 个 是 画 文字 开始 处 的 x 坐标 ,第 三 个 是 开始 的 处 的 纵 坐 标 ,， 第 四 个 是 一 个 画笔 对 象 。 要 注 
意 的 是 ， 在 计算 画 文 本 的 x 轴 上 的 开始 位 置 时 ， 使 用 内 容 区 的 宽度 减 去 了 文本 的 宽度 
(contentWidth - mTextVWidth)， 但 是 在 计算 y 轴 上 的 开始 位 置 时 ， 却 用 了 加 : (contentHeight + 
mTextHeight), 这 是 因为 在 x 轴 上 是 从 左边 开始 画 的 , 而 在 y 轴 上 是 从 底部 开始 画 的 ,这样 就 
使 文字 居于 中 了 。 最 后 ， 调 用 drawable 对 象 〈 这 里 实际 上 是 一 个 图 像 ) 的 draw0 方 法 ， 将 日 
己 画 在 了 画布 上 。 在 画 之 前 ， 也 使 用 方法 setBounds0O 设 置 了 自己 应 处 的 位 置 和 大 小 ， 从 传 入 
的 参数 看 ， 这 个 图 像 会 填充 整个 内 容 区 ， 也 就 是 说 ， 如 果 这 个 图 像 与 内 容 区 的 长 宽 比 不 一 样 ， 
那 这 个 图 像 会 变形 ， 如 图 11.2.2.2 所 示 。 


AndFirstStep 


11.2.22 
onDraw0 里 的 第 一 句 就 是 调用 父 类 的 onDraw0O， 这 个 很 重要 ， 一 般 情 况 下 是 必须 这 样 做 
的 。 
看 起 来 这 个 方法 并 不 复杂 。 但 是 ， 我 们 依然 有 很 多 些 疑 问 ， 比 如 ， 调 用 getPaddingXXX0O 
方法 为 什么 会 获取 到 Padding 的 值 , mExampleString 和 mExampleDrawable 是 从 哪里 传 进来 的 ? 
文本 的 宽度 mTextWidth 和 高 度 mTextHeight 是 怎么 计算 出 来 的 ? 画笔 mTextPaint 是 个 什么 东 
yu? 为 什么 要 用 它 ? 在 哪里 创建 的 ? 欲 知 迷 底 ， 请 看 下 节 。 


11.2.3 init() 方 法 


我 们 的 自 定 义 控 件 类 中 ， 很 多 变量 的 值 都 来 自 界 面 构建 器 中 指定 的 属性 ， 比 如 Padding、 
宽度 、 高 度 、mExampleString,mExampleDrawable， 如 图 11.2.3.1 所 示 。 
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Attributes 
id 


layout height 300dp 
Layout Margin [?, ?, ?, ?, ?] 
Padding [?, ?, ?, ?, ?] 
Theme 


elevation 

background [2 sccc 

exampleColor IN #33b5e5 

exampleDimension 24sp 

exampleDrawable (Gandroid:drawable/ic menu add 
exampleString Hello, RoundlmageView 
accessibilityLiveRegion 

accessibilityTraversalAfter 


11.2.3.1 


这 些 属性 都 通过 构造 方法 的 “attrs ”参数 传 给 了 控件 , 那些 内 置 的 属性 , 比如 layout width, 
Padding, background 等 会 在 父 类 的 代码 中 取出 并 保存 : 


public RoundImageView(Context context, AttributeSet attrs) { 
super(context, attrs); 
init(attrs, defStyle: rm —— 


所 以 当 你 调用 getPaddingXXX()、getWidthO 时 会 获取 到 有 效 的 值 。 而 非 内 置 属性 ( 见 红 框 
内 框 的 那 几 个 ) ， 就 只 能 我 们 目 己 处 理 了 。 这 几 个 目 定 义 属性 是 怎么 来 的 呢 ? 这 个 下 节 再 讲 ， 
我 们 先 看 一 下 初始 化 方法 中 做 了 什么 : 
private void init(AttributeSet attrs, int defStyle) { 
/ / TE EE XE ELE X BTEBUHB 
final TypedArray a = getContext().obtainStyledAttributes( 
attrs, R.styleable.RoundImageView, defStyle, 0); 


// EI EE X BTEHTA, HRA 
mExampleString = a.getString(R.styleable.RoundImageView exampleString); 
/ / JE X E ERES 
mExampleColor - 
a.getColor(R.styleable.RoundImageView exampleColor,mExampleColor); 
// RRX EHI FEA 
mExampleDimension = 
a.getDimension (R.styleable.RoundImageView exampleDimension, 
mExampleDimension); 


if (a.hasValue(R.styleable.RoundImageView exampleDrawable)) | 
// EIER 


mExampleDrawable = 
a.getDrawable(R.styleable.RoundImageView exampleDrawable); 

// AXI I Z View izh 

mExampleDrawable.setCallback(this); 
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} 


/ / FEE — HE EUR 

a.recycle (); 

/ / &/ & IB] X AK TIL E 

mTextPaint = new TextPaint(); 

// ET IB AUR 
mTextPaint.setFlags(Paint.ANTI ALIAS FLAG); 
// REX TF HIX I 
mTextPaint.setTextAlign(Paint.Align. LEFT); 
// REX F GEKRAAI, IREX HI RA G 


invalidateTextPaintAndMeasurements (); 


看 到 以 上 代码 ， 前 面 很 多 疑问 应 该 得 到 解答 了 。mExampleString 和 mExampleDrawable 都 
是 通过 attrs 传 进来 的 ， 放 在 一 个 TypedArray 里 ， 我 们 可 以 通过 其 资源 id 从 TypedArray 里 取 
出 来 ,同时 传 进来 的 还 有 mExampleDimension fil mExampleColor, 这 两 个 被 用 来 设置 mTextPaint 
的 属性 ， 见 invalidateTextPaintAndMeasurements()7; 7X: : 
private void invalidateTextPaintAndMeasurements() { 
// BEI XA 
mTextPaint.setTextSize (mExampleDimension); 


// WE X TBIE 
mTextPaint.setColor (mExampleColor); 


// RECREATE, I HÉ mExamplestring PPIX KIHstcEsm 
mTextWidth = mTextPaint.measureText (mExampleString); 

// RECREATE, I HÉmExamplestring PPR AHER G 
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics(); 
mTextHeight - fontMetrics.bottom; 


为 什么 这 个 方法 要 单独 拿 出 来 呢 ? 因为 这 段 代 码 要 在 其 他 地 方 多 次 用 到 , 比如 在 设置 文本 
时 ， 因 为 文本 的 内 容 变 了 ， 所 以 需要 重新 计算 文本 的 宽 和 高 ， 所 以 需要 重新 调用 这 段 代 码 。 

初始 化 方法 在 构造 方法 中 被 调用 ， 所 以 只 执行 一 次 ， 而 onDraw0O 可 能 被 执行 多 次 ， 于 是 
我 们 在 初始 化 方法 中 就 准备 好 在 onDraw0 中 要 使 用 的 东西 ,而 不 是 在 onDraw0O 中 现 用 现 准 备 ， 
这 样 就 提高 了 onDraw0 的 执行 效率 。 


11.24 上 自 定 义 属 性 


现在 再 来 研究 一 下 自 定义 属性 是 如 何 搞 出 来 的 。 如 果 只 想 在 代码 中 创建 控件 的 话 , 用 不 着 
为 控件 创建 日 定义 属性 ， 所 以 创建 自 定 义 属性 纯粹 是 为 了 能 在 界面 构建 器 中 使 用 。 

要 创建 和 目 定义 ， 需 要 在 res/values 下 增加 一 个 XML 文件 ， 在 其 中 定义 目 定 义 属 性 的 名 字 
和 值 的 类 型 ， 在 利用 同 导 创建 自 定 义 控 件 类 时 ， 自 动 为 我 们 增加 了 这 个 文件 : 
attrs round image view.xml， 这 就 省 下 我 们 自己 创建 了 。 这 个 文件 的 内 容 如 下 : 


184 


第 11 章 ” 自 定义 控件 


<resources> 
«declare-styleable name-"RoundImageView"» 


«attr name-"exampleString" format-"string" /> 


«attr name-"exampleDimension" format-"dimension" /» 
«attr name-"exampleColor" format-"color" /» 
«attr name-"exampleDrawable" format-"color|reference" /» 
«/declare-styleable» 
«/resources» 


最 外 层 元 素 是 “resources”， 固 定 写 法 ， 跟 字符 串 和 style 等 资源 一 样 ， 实 际 上 它们 可 以 
放 在 一 起 ,不 过 为 了 让 人 容易 理解 ,一 般 融 把 不 同类 型 的 资源 放 在 不 同 的 文件 中 了 。 这 个 文件 
中 的 资源 类 型 是 “declare-styleable”， 为 了 能 在 其 他 地 方 引 用 这 个 资源 ， 它 必须 有 名 字 ， 这 里 
的 名 字 叫 “RoundImageView”， 与 我 们 的 类 名 相同 ， 其 实 这 不 是 必需 的 ， 也 就 是 说 这 个 资源 
与 使 用 它 的 类 没有 关联 关系 ， 这 个 资源 并 不 是 只 能 被 类 RoundImageView 使 用 。 
“declare-styleable ”的 每 一 个 子 元素 叫 “attr” (attribute 的 缩写 ) ， 这 让 我 们 联想 到 了 
RoundImageViewO 的 构造 方法 的 参数 。 每 个 attribute 都 有 名 字 ， 这 些 名 字 正 是 我 们 在 界面 设计 
器 中 为 RoundImageView 指定 的 日 定义 属性 的 名 字 ， 如 图 11.2.4.1 所 示 。 


Attributes 
id 


layout height 300dp 
» Layout Margin [?, ?, ?, ?, ?] 
» Padding [?, ?, ?, ?, ?] 
» Theme 

elevation 

background $ccc 

exampleColor E #33b5e5 


exampleDimension 24sp 


exampleDrawable @android:drawable/ic_menu_add 
exampleStrinc Hello, RoundlmageView 
accessibilityLiveRegion 

accessibilityTraversalAfter 


11.24.1 


attribute 的 值 的 类 型 由 属性 “format” 指 定 ，string 是 字符 串 ; dimension 是 数字 〈 这 个 数 
字 表 示 距 离 ); color 是 一 个 颜色 ， 比 如 “#ccc”; reference 表示 引用 ， 引 用 就 是 一 个 对 象 。 
如 果 可 以 在 几 种 类 型 之 间 选 择 ， 在 类 型 之 间 加 “|” 即 可 。 比 如 “colorlreference” 表 示 可 以 是 
一 个 颜色 也 可 以 是 一 个 引用 ， 可 以 看 到 exampleDrawabled 的 值 类 型 就 是 “colorlreference”， 
我 们 为 自 定 义 控 件 的 这 个 属性 传 入 了 一 个 图 像 的 引用 : "(Qandroid:drawable/ic menu add”。 

目 定 义 属性 已 添加 , 那 如 何 使 用 它 呢 ? 首先 你 要 在 layout 文件 中 为 你 的 控件 指 这 些 属性 的 
值 。 注 意 这 些 属 性 并 不 会 自动 出 现在 你 的 自 定 义 控件 的 属性 编辑 器 中 , 你 需要 在 源码 中 手动 添 
加 ， 如 下 : 
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<niuedu.com.andfirststep.RoundImageView 
android:layout_width="300dp" 
android:layout_height="300dp" 
android:background="#ccc" 


app:exampleColorz"$33b5e5" 
app:exampleDimension-"24sp" 
app:exampleDrawable-"Qgandroid:drawable/ic menu add" 
app:exampleString-"Hello, RoundImageView" /> 


当 你 手动 添加 之 后 , 在 属性 编辑 器 中 也 就 能 看 到 了 。 添 加 之 后 ， 你 融 可 以 在 代码 中 随时 把 
这 些 属 性 的 值 取 出 来 了 。 我 们 的 代码 中 是 在 init0 方 法 中 取出 来 的 。 我 们 知道 参数 是 通过 attrs 
这 个 参数 传 进 来 的 ， 在 init0 中 首先 做 的 就 是 从 attrs 取得 一 个 TypedArray 对 象 : 


这 个 方法 有 四 个 参数 : 第 一 个 参数 不 用 解释 了 ; 第 二 个 是 styleable 资源 的 id, H S RIIE 
attrs round image view.xml 中 定义 的 资源 RoundImageView， 这 样 后 面 才能 通过 自 定义 属性 的 名 字 
取得 其 值 ， 如 果 没 有 这 个 参数 ， 只 可 以 取得 内 置 的 属性 的 值 ， 无 法 访问 日 定义 的 属性 ; 第 三 个 参数 
是 自 定 义 属性 的 默认 值 的 资源 ID; 第 四 个 参数 是 包含 View 的 某 些 属性 的 默认 值 的 资源 id, 后 两 个 
一 般 用 不 到 。 有 了 TypedAmay 对 象 之 后 ， 就 可 以 通过 属性 名 取得 属性 了 ， 比 如 : 

// 获 取 目 定义 属性 的 值 ， 获 取 文 本 
mExampleString = a.getString(R.styleable.RoundlImageView exampleString); 


/ / BREKI E 
mExampleColor - 


a.getColor(R.styleable.RoundlImageView exampleColor,mExampleColor); 


" exampleString ”这 个 属性 的 值 是 String 类 型 的 , 所 以 调用 TypedArray 的 getString0 方 法 ， 
而 “exampleColor” 的 值 是 一 个 类 型 是 一 个 Color， 所 以 调用 方法 getColor0 取 得 其 值 ， 注 意 其 
后 还 有 一 个 参数 ， 这 个 参数 是 默认 值 ， 如 果 在 TypedArray 中 找 不 到 这 个 属性 ， 就 返回 默认 值 。 


11.2.5 fiBi 


有 些 看 官 可 能 对 计算 机 作画 很 陌生 ， 这 里 稍微 介绍 一 下 。 

首先 要 记 住 , 程序 显示 出 的 样子 ， 是 程序 自己 画 出 来 的 。 当 然 作 画 的 代码 是 你 写 的 ， 由 于 
你 调用 了 系统 提供 给 你 的 API， 让 你 减少 了 很 多 工作 ,但 也 造成 了 你 与 别人 长 的 差不多 ， 比 如 
Windows 系统 中 的 窗口 程序 。 程 序 总 是 在 内 存 中 先 把 画 画 完 ， 然 后 把 整 张 图 传 到 显卡 的 显存 
中 ， 一 旦 传 到 显存 中 ， 就 会 在 屏幕 上 看 到 。 注 意 实际 显卡 在 显示 之 前 ， 还 要 将 图 像 合 并 一 下 ， 
因为 同一 时 刻 作画 的 不 止 你 一 个 程序 ,比如 同时 可 以 看 到 多 个 窗口 。 上 面 的 窗口 要 兰 住 下 面 的 
窗口 ， 所 以 显卡 就 要 根据 谁 在 上 谁 在 下 合并 这 些 图 像 , 合并 后 再 显示 。 当 然 你 感觉 不 出 这 个 过 
程 ， 因 为 显卡 一 秒 钟 刷 新 至 少 60 次 以 上 ， 当 你 用 鼠标 拖 着 一 个 窗口 游 走时 ， 这 个 作画 并 显示 
的 过 程 在 不 停 地 快速 反复 执行 。 

所 有 有 图 形 界 面 的 操作 系统 ， 部 提供 了 作画 用 的 API。 所 以 你 可 以 用 代码 画 一 条 直线 、 一 
个 窃 形 、 一 个 李 圆 、 一 个 正 圆 、 一 个 三 角形 ， 或 男 一 个 贝 蹇 尔 曲 线 ， 还 可 以 用 一 种 颜色 填充 一 
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个 封闭 的 图 像 ， 比 如 和 矩形 或 圆 等 。 你 填充 时 还 可 以 以 颜色 渐变 的 方式 ， 玩 过 Photoshop Bf ACE 
定 熟悉 这 些 玩法 。 

因为 画图 时 要 先 画 到 内 存 中 ， 所 以 就 需要 一 块 内 存 ， 这 块 内 存 就 是 画布 《Canvas) ， 所 以 
View 类 的 onDraw0 方 法 传 入 了 一 个 参数 canvas， 它 是 与 当前 View 所 关联 的 ， 是 供 我 们 作画 
的 一 块 内 存 (当然 实际 上 不 仅 是 内 存 这 么 简单 了 ， 你 先 把 它 理解 为 一 块 内 存 吧 〉 ， 如 果 你 作 的 
画 超 出 了 View 的 实际 范围 ， 那 就 看 不 到 超出 的 部 分 了 ， 上 所 以 作画 时 应 取得 View 的 Width 和 
Height， 并 考虑 Padding (内 部 空白 ) 。 

再 回头 看 一 下 onDraw0 里 面 的 代码 ， 你 应 该 能 注意 到 ， 画 文字 和 画图 像 的 API 差别 很 大 ， 
团 文 字 需 要 准备 一 文笔 (pain) , 实际 上 这 文 画笔 不 是 仅仅 用 来 画 文 字 的 , 它 还 可 以 画 线 条 ( 直 
线 或 曲线 ) ， 画 各 种 形状 ,你 还 可 以 设置 这 支 笔 的 参数 ， 比 如 颜色 、 线 条 粗细 、 是 否 开启 抗 锯 
齿 《〈 即 平滑 效果 ) ， 由 于 要 男 文 字 ， 所 以 这 里 还 设置 了 字体 大 小 、 文 字 的 对 齐 方式 等 。 下 面 我 
们 用 这 种 笔画 一 个 形状 ， 比 如 为 自 定 义 控件 增加 边框 ,这 很 简单 ,我 们 只 需要 男 一 个 比 控件 小 
一 个 像素 的 矩形 即 可 。 在 onDraw0 方 法 的 最 后 增加 下 面 几 句 : 
// BREMER 
mTextPaint.setStrokeWidth(10.0f); 
// BE HR MERT RI 
mTextPaint.setStyle(Paint.Style. STROKE); 


/ / IBI — P IETETE RAN PUR IE, TEDPVTETEIBULAR 


canvas.drawRect (new Rect(1,1,getWidth()-2,getHeight()-2),mTextPaint); 
执行 效果 如 图 11.5.1 所 示 。 
注意 不 必 运 行 App， 在 界面 设计 项 的 预览 中 就 能 看 到 效果 ， 但 是 ， 如 果 你 改 了 代码 ， 想 看 
到 效果 必须 编译 一 下 ， 如 图 112.52 Bron. 


AndFirstStep or MICE Run Tools VCS Window Help 
I | Make Module 'app' 
Clean Project - 
Rebuild Project 
Refresh Linked C++ Projects 


Edit Build Types... 
Edit Flavors... 


Edit Libraries and Dependencies... 


11.2.5.1 图 11.2.5.2 
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,= ”创建 圆 形 图 像 控 件 


很 多 登录 界面 上 的 图 像 都 是 圆 形 的 ， 如 图 11.3.1 所 示 。 


11.3.1 


控件 显示 为 圆 形 ， 圆 之 外 的 图 像 被 剪 切 邱 。 注 意 系统 中 的 的 图 像 控件 ImageView， 当 前 是 
做 不 到 这 个 效果 的 ， 所 以 我 们 只 能 目 己 摘 一 个 出 来 。 我 们 前 面 创 建 的 目 定义 控件 叫 作 
RoundImageView， 就 是 为 现在 做 准备 的 。 下 面 我 们 就 改进 一 下 这 个 类 ， 让 它 能 显示 圆 形 图 像 。 

有 个 地 方 还 得 多 说 一 句 ，RoundImageView 是 直接 从 View 派生 的 ， 而 不 是 从 ImageView 
派生 的 ， 那 为 什么 不 从 ImageView 派生 呢 ? 我 们 的 控件 不 也 是 要 显示 图 像 吗 ? 原因 是 这 样 的 ， 
可 以 从 ImageView 派生 ， 但 是 更 及 烦 ， 因 为 ImageView 内 部 已 经 处 理 了 图 像 的 显示 ， 还 支持 
图 像 的 显示 模式 ， 是 否 居中 ， 还 有 它 特 有 的 Getter 和 setter， 我 们 如 果 接 管 了 图 像 绘制 的 话 就 
需要 自己 实现 这 些 需 求 ， 以 及 那些 Getter 和 Setter， 很 麻烦， 而 同时 ， 从 View 派生 来 显示 图 
像 也 不 算 难 , 因为 现在 就 能 显示 了 , 而 且 我 们 只 需要 把 图 像 显示 在 中 央 即 可 , 也 不 必 文 持 拉 伸 ， 
所 以 经 过 我 严密 的 福尔摩斯 式 的 推理 ， 上 断定 还 是 从 View 派生 更 好 。 

先 介绍 一 下 实现 原理 : 利用 Paint 对 象 可 以 了 画 圆 ， 也 可 以 了 男 图 像 ， 但 是 把 图 像 绘 在 一 个 圆 
的 范围 内 ， 超 出 圆 的 部 分 被 切 掉 ， 并 不 是 那么 简单 ， 这 要 用 到 一 个 东西 ， 即 着色 器 (Shader) . 
利用 图 像 创 建 着 色 器 ， 把 着 色 器 设置 给 Paint， 然 后 用 Paint 画 圆 ， 就 画 出 了 圆 形 图 像 。 过 程 大 
致 如 下 : 

mBitmapShader = new BitmapShader (bitmap ,...); 


mBitmapPaint = new Paint(); 
mBitmapPaint.setShader (mBitmapShader); 


canvas.drawCircle(x, y, radius, mBitmapPaint); 


着 色 器 是 OpenGL 中 用 于 图 像 处 理 的 组 件 ， 要 想 了 解 着 色 器 ,请 参看 OpenGL 2.0+ 的 开发 
手册 。 


我 们 将 画 圆 形 图 像 的 Paint 字段 定 为 mBitmapPaint， 但 我 们 除了 画图 像 外 ， 还 要 在 其 外 面 
画 一 个 圆圈 ， 所 以 需要 再 准备 一 个 Paint， 命 名 为 mBorderPaint。 这 个 Paint 就 不 需要 设置 着 色 
器 了 ， 只 要 提前 准备 好 这 两 个 Paint， 在 onDraw0O 中 这 样 做 : 
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QOverride 
protected void onDraw (Canvas canvas) { 
if(mDrawable == null)( 
return; 
} 
/ / AE 


canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, mBorderRadius, 
mBorderPaint); 

// BIER 

canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, mDrawableRadius, 
mBitmapPaint); 
} 


主要 是 利用 了 这 两 个 Paint 在 画布 上 男 了 两 个 圆 。mDrawable 是 在 界面 构建 器 中 为 此 控件 
设置 的 图 像 ， 在 init0 方 法 中 已 取出 。drawCircle0 〈 男 圆 ) 方法 有 四 个 参数 ， 第 一 个 是 圆心 的 
x 坐标， 第 二 个 是 圆心 的 y 坐标 ， 第 三 个 是 圆 的 半径 ， 第 四 个 是 要 使 用 的 画笔 。 图 像 和 边框 都 
要 在 控件 中 大 中， 所 以 圆心 都 是 控件 的 中 心 点 。 在 执行 onDraw0 之 前 ， 我 们 需要 准备 好 
mBorderPaint (边框 画笔 . mBorderRadius (边框 半径 ) . mBitmapPaint (图 像 画 笔 )、 
mDrawableRadius 〈 图 像 半 径 ) 。 下 面 对 这 四 个 变量 做 一 下 解释 。 


e  mborderRadius 
边框 是 紧 贴 着 控件 的 边缘 来 男 的 ， 所 以 根据 控件 的 大 小 来 计算 mBorderRadius。 在 控件 的 
宽 和 高 中 取 一 个 最 小 的 ， 然 后 除 以 2: 


mBorderRadius = Math.min((getHeight() - mBorderStrokeWidth) / 2f, 
(getWidth() - mBorderStrokeWidth) / 2f); 


这 里 使 用 了 数学 函数 min0， 它 返回 两 个 参数 中 最 小 的 一 个 。 

e IDIrawableRadius 

图 像 需 要 男 在 边框 内 ， 所 以 其 半径 要 小 一 点 ， 小 多 少 呢 ? 要 衬 出 边框 线 的 位 置 ， 所 以 应 是 
边框 线 的 宽度 mBorderStrokeWidth， 同 时 ， 还 要 考虑 内 部 空白 Padding， 于 是 计算 这 个 值 的 代 
fd Xe XX FER: 


RectF drawableRect = new RectF (mBorderStrokeWidth-tpaddingLeft, 
mBorderStrokeWidth-4paddingTop, 
getWidth() - mBorderStrokeWidth-paddingRight, 


getHeight() - mBorderStrokeWidth-paddingBottom); 
/ HEBEBIBUEAT IEEE E 
mDrawableRadius - Math.min(drawableRect.height() / 2f,drawableRect.width() / 
2f); 


首先 创建 了 一 个 矩形 对 象 drawableRect, RectF 是 用 于 存储 和 矩形 的 参数 的 : 
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public class RectF implements Parcelable { 
public float left; 
public float top; 


public float right; 
9 public float bottom; 


Rect 是 Rectangle 的 简写 , 后 面市 的 F 表示 其 变量 类 形 都 是 float 型 的 。 其 构造 方法 需要 四 
个 参数 ， 对 应 其 四 个 成 员 变 量 : XUE x 上 的 左边 位 置 、y 上 的 顶部 位 置 、x 上 的 右边 位 置 、y 
上 的 后 部 位 置 。 可 以 看 到 在 计算 这 四 个 位 置 时 ， 考 虑 了 padding 的 因 系 。getWidth0 是 获取 控 
件 的 宽 ，getHeightO 是 获取 控件 的 高 。 至 于 mBorderStrokeWidth 的 值 ， 很 简单 ， 从 attrs 中 传 进 
来 的 ， 是 我 们 目 定 义 的 属性 。 


e  mbBorderPaint 
这 文 男 笔 很 简单 ， 在 初始 化 时 作 了 如 下 处 理 : 


/ / E & IBI TEE EJ IBI AES 

mBorderPaint - new Paint(); 

/ / RRT RI 
mBorderPaint.setStyle(Paint.Style.STROKE); 

/ / ILLE m A TE ACA 
mBorderPaint.setFlags(Paint.ANTI ALIAS FLAG); 

// BLEU E 

mBorderPaint.setColor (mBorderColor); 

// BLUES XE THAN 

mBorderPaint.setStrokeWidth (mBorderStrokeWidth); 


剩 下 的 就 是 在 onDraw0O 中 使 用 它 了 。 
e  mBitmapPaint 
这 个 画笔 的 主要 特点 是 需要 一 个 着 色 器 ， 而 这 个 着 色 器 是 由 要 画 的 位 图 创建 的 : 


// EVE PEERS, BLUE EZB TERT ARA, UEF windows HORIS T flf zt 
// AXE BECAS fil 

mBitmapShader = new BitmapShader (bitmap, Shader.TileMode.CLAMP, 
Shader.TileMode.CLAMP); 


/ / ÉJ& BI Tz FIHI IE, 

mBitmapPaint - new Paint(); 

// IER Ë AE E A E 
mBitmapPaint.setShader (mBitmapShader); 


剩 下 的 也 是 在 onDraw0 中 使 用 它 了 。 

调用 着 色 器 的 构造 方法 时 ， 传 入 的 第 一 个 参数 bitmap 是 一 个 位 图 对 象 ， 它 也 是 通过 attrs 
中 传 进来 的 。 但 是 attrs 传 进来 的 是 一 个 Drawable 对 象 ， 由 Drawable 转 成 bitmap 并 不 是 那么 
简单 ， 下 面 我 们 详细 解释 一 下 。 


190 


第 11 章 ” 自 定义 控件 


11.3.1 将 Drawable 转 成 Bitmap 


Bitmap 就 是 位 图 ， 也 叫 栅 格 图 ， 它 里 面 保存 的 是 图 像 的 所 有 像素 ， 一 个 像素 由 多 个 字 节 
表示 。 像 素 是 什么 ? 像素 其 实 就 是 颜色 ， 那 如 何 表示 颜色 呢 ? 我 们 都 知道 三 原色 : 红 绿 蓝 ， 只 
要 这 三 原色 每 个 有 不 同 的 深度 , 混合 起 来 就 能 混 出 不 同 的 颜色 。 在 计算 机 中 也 一 样 , 一 个 颜色 
也 是 由 三 原色 组 成 的 ， 一 般 一 个 原色 占 一 个 字 节 ， 按 RGB (ARH) 顺序 排列 ， 三 个 字 节 一 
起 组 成 一 个 颜色 ， 这 每 个 原色 在 计算 机 中 叫 作 一 个 通道 ， 每 个 通道 的 值 都 是 0 到 255， 三 个 通 
道 各 取 不 同 的 值 进行 组 合 ( 混 色 ) ,能 混 出 多 少 种 颜色 呢 ? 你 自己 算 吧 (反正 是 真 彩色 没 错 ) 。 
所 有 通道 的 值 都 是 0 时 ， 这 个 颜色 就 是 纯 黑 。 如 果 都 是 FF， 这 个 颜色 就 是 纯 白 。 如 果 及 通道 
是 0 而 其 余 两 个 通道 都 是 FF， 就 为 纯 红 。 纯 绿 和 纯 赣 自己 推导 吧 。 如 果 三 个 通道 的 值 都 相同 
的 话 ， 就 是 某 种 程度 的 灰色 。 那 透明 色 是 什么 ?” 透明 其 实 不 是 一 种 颜色 ， 仅 用 RGB 三 通道 是 
不 能 表示 透明 的 ， 所 以 一 般 用 四 个 通道 表示 一 个 颜色 : ARGB, A (Alpha) 就 是 用 于 表示 透明 
程度 的 ， 也 占 一 个 字 节 ， 值 越 小 越 透 明 ， 为 0 时 完全 透明 ， 为 255 时 完全 不 透明 。 我 们 前 面 所 
使 用 的 图 像 ( 如 图 11.3.1.1 所 示 ) 都 属于 位 图 ， 虽 然 这 两 个 png 文件 中 的 像素 并 不 是 如 上 面 所 
说 的 方式 表示 的 , 但 实际 上 是 因为 png 文件 是 位 图 压缩 后 的 形式 , 解码 后 放 在 内 存 中 的 图 像 数 
据 就 变 成 了 上 面 所 说 的 那样 。 所 以 ， 我 们 常见 的 图 像 格 式 如 png、jpg、gif 等 都 属于 位 图 。 


= female.png 


= music default.png 


11.3.1.1 


与 位 图 相对 的 男 一 种 图 像 是 矢量 图 .与 位 图 不 同 , RE P] He S A n fr d — i S AR, 
而 不 是 各 像素 的 颜色 , 显示 矢量 图 其 实 就 是 执行 代码 把 它 画 出 来 , 这 样 带 来 的 好 处 是 缩放 时 不 
失真 ， 坏 处 是 不 能 表现 太 复杂 的 图 像 (不 是 不 能 ， 是 太 难 弄 ， 而 且 显 示 的 时 候 也 很 慢 ) ， 一 般 
只 显示 比较 简单 的 线条 、 形 状 , 或 它们 的 组 合 。Android 的 Drawable 资源 对 这 两 种 图 像 都 支持 
(矢量 图 后 面 会 讲 ) ， 但 是 Drawable 所 代表 的 东西 不 限于 图 像 ， 能 被 绘制 的 东西 都 成 为 
Drawable， 比 如 颜色 ， 所 以 要 区 分 Drawable 与 图 像 这 两 种 概念 之 间 的 区 别 。 

我 们 为 控件 自 定 义 了 一 个 属性 ， 叫 作 “drawable”， 用 于 在 界面 构建 器 中 设置 要 显示 的 东西 : 


从 format 的 值 可 以 看 到 ， 这 个 属性 不 但 可 以 传 入 图 像 ， 也 可 以 传 入 颜色 。 注 意 Bitmap 类 
与 Drawable 类 是 不 同 的 ， 不 能 以 类 型 转换 的 方式 把 Drawable 对 象 转 成 Bitmap. 

如 果 传 入 的 就 是 一 个 图 像 ， 那 在 内 存 中 就 是 一 个 BitmapDrawable 类 型 的 实例 ， 此 时 直接 
调用 BitmapDrawable 的 方法 getBitmapO 即 可 得 到 Bitmap: 


if (drawable instanceof BitmapDrawable) { 


/LTIBEXTAR SIE, UMRAH — NE Drawable, HERRI AIH [n] 


return ((BitmapDrawable) drawable) .getBitmap (); 
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注意 此 时 Bitmap 宽 和 高 就 是 所 传 入 图 像 的 宽 和 高 。 

而 当 传 入 的 是 一 个 颜色 而 不 是 图 像 时 ,在 内 存 中 就 是 一 个 ColorDrawable 实例 , 转换 Bitmap 
就 稍微 复杂 上 点， 需要 先 创建 一 个 Bitmap 的 实例 ， 然 后 创建 一 个 画布 (Canvas) ， 然 后 将 
ColorDrawable 画 到 这 个 画布 上 ， 因 为 画布 关联 了 位 图 ， 所 以 实际 上 就 画 到 了 位 图 上 。 注 意 此 
时 创建 的 Bitmap 的 宽 和 高 只 需 占 一 个 像素 即 可 ,因为 这 个 Bitmap 是 用 来 创建 着 色 器 的 , 着 色 
器 被 设置 到 Paint F, Paint 在 画 加 时 ,会 对 着 色 器 进行 缩放 以 适应 要 画 的 圆 的 大 小 ， 由 于 只 有 
一 种 颜色 ， 所 以 任 它 怎么 缩放 也 无 影响 。 代 码 如 下 : 


if (drawable instanceof ColorDrawable) { 
// 如 果 是 一 个 颜色 ， 则 创建 一 个 宽 和 高 都 是 一 个 像素 的 Bitmap, 
// 指 定 其 颜色 空间 是 ARGB 四 通道 ， 每 个 通道 占 8 个 字 节 。 
bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB 8888); 


} 

/[/[ 侯 帮 办 必须 要 让 drawable "PEE, Dr BUAI AIEE, 

// ffl drawable WDD E, SE ESLIB EJ Y fz Eg E 

Canvas canvas - new Canvas (bitmap); 

// RERIK, hT ERLAND 

drawable .setBounds (0, 0, canvas.getWidth(), canvas.getHeight ()); 


drawable.draw (canvas); 


传 入 的 如 果 是 其 他 类 型 的 Drawable， 处 理 方 式 与 ColorDrawable 类 似 ， 需 要 先 创建 一 个 
Bitmap 实例 ， 然 后 把 Drawable 的 内 容 男 上 去 ， 但 这 个 Bitmap 的 宽 和 高 必须 与 Drawalbe 实际 
的 宽 和 高 相同 。 获 取 Drawable 的 宽 和 高 可 用 方法 getmtrinsicWidthO0 和 getIntrinsicHeight(). 4X 
iar: 

bitmap - Bitmap.createBitmap( 
drawable.getIntrinsicWidth(), 
drawable.getIntrinsicHeight(), 


Bitmap.Config.ARGB 8888); 
// ff E'EAAISEZ, drawable PHAR, Mei A ENEB, 


// {Æ drawable Aim E. Schw LRE T fe Bg E 
Canvas canvas = new Canvas (bitmap); 
AIX E, eN EREL A NA R 
drawable .setBounds (0, 0, canvas.getWidth(), canvas.getHeight ()); 
drawable.draw(canvas); 


从 Drawable 转换 出 来 的 位 图 ， 会 用 来 创建 着 色 器 ， 着 色 器 被 设置 给 mBitmapPaint H AJ% 
图 ， 但 是 在 画 圆 形 图 时 ， 目 标 区 域 与 Bitmap 本 是 的 大 小 和 宽 高 比 可 能 是 不 同 的 ， 所 以 要 进行 
缩放 ， 这 就 是 需要 对 着 色 器 进行 变换 ,就 要 用 到 变换 和 矩阵， 下 面 仔细 来 研究 一 下 如 何 创建 这 个 
AREE. 


11.3.2 ”变换 矩阵 


在 OpenGL 中 ,图 像 的 缩放 、 变 色 、 移 位 等 都 叫 变换 ， 这 些 变换 是 对 图 像 中 每 个 像素 进行 
了 一 定 的 运算 。 比 如 移 位 , 因为 是 三 维 空间 , 要 把 图 像 从 A(xl,y1,z1) 坐 标 移 到 B 坐标 (x2.y2.z2)， 
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就 是 把 图 像 的 每 个 顶点 〈 比 如 三 角形 有 三 个 项 点， 六 面体 有 八 个 顶点 ) 的 x、y 、z 上 的 值 加 
REME, 因为 有 三 个 分 量 , 所 以 都 是 以 窍 阵 的 形式 表示 , 于 是 要 进行 变换 就 要 准备 一 个 矩阵 。 
当然 我 们 是 二 维 变换 ， 不 是 三 维 的 ， 但 是 窍 阵 是 一 样 的 ， 只 不 过 变换 时 z 坐标 不 变 。 

我 们 要 进行 的 变换 是 缩放 和 位 移 ， 并 且 我 们 还 要 保持 图 像 的 宽 高 比 ， 并且 要 居中 ,所 以 我 
们 要 考虑 容纳 图 像 的 矩形 与 图 像 大 小 之 间 的 关系 以 进行 图 像 缩放 比例 的 计算 。 代 码 如 下 : 


float scale; 
float dx = 0; // BBE x WHERE 
float dy = 0; //BBRE y fl E7FÁGHUTV EE 


// ZERBI, MT it RPR HIERA 
Matrix mShaderMatrix = new Matrix(); 
mShaderMatrix.set (null); 
// it R PIR m RACHAT LE TP, RITA TR LET IB URL PITE HU ACA RTES E ITI E A 
if (mBitmapWidth * drawableRect.height() < drawableRect.width() * mBitmapHeight) 
{ 
/ / URBI BA TIREEHI E PTR ET HI GEIRR I IET RE RET FR], 
/ /L TER EU PIT 2 PIRA E LR 
scale = drawableRect.height() / (float) mBitmapHeight; 
// BBR ILI EEE, Mett X MERRI AA EE 
dx = (drawableRect.width() - mBitmapWidth * scale) * 0.5f; 
) else { 
/ / AUSTR E E AN APPETERE. PS AE HI TL PI EE WAAN, 
/ LL TER Ta Ee tt E ENR AB EB 
scale = drawableRect.width() / (float) mBitmapWidth; 
// ABRES EEE, PEDE y 41 EBIGIEZFÁAEBE 
dy = (drawableRect.height() - mBitmapHeight * scale) * 0.5f; 
} 


// REM BUE X HA y KITA LU TRI 
mShaderMatrix.setScale(scale, scale); 
// EE EIIE x Jl y WEHE, URURI RE PF 
mShaderMatrix.postTranslate( 
(int) (dx + 0.5f) + mBorderStrokeWidth, 
(int) (dy + 0.5f) + mBorderStrokeWidth); 


/ PERIERE REAA EAE 
mBitmapShader.setLocalMatrix (mShaderMatrix); 


11.3.3 ”上 自 定义 属性 的 改动 
对 原先 的 一 自 定义 属性 作 了 改动 ， 现 在 的 自 定义 属性 如 下 : 


«resources» 
«declare-styleable name-"RoundImageView"» 
«attr name-"borderWidth" format-"dimension" /> 


«attr name-"borderColor" format-"color" /» 
«attr name-"drawable" format-"color|reference" /» 
«/declare-styleable» 
«/resources» 
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borderWidth 是 线条 宽度 ，borderColor 是 线条 颜色 ，drawable Æ Z mM AKIA EHZ. IE 
我 们 把 登录 页 面 的 头像 改 为 使 用 这 个 类 ， 如 图 11.3.3.1 所 示 。 


^y CheckedTextViev 
三 Spinner 
ÇC ProgressBar 
= ProgressBar (Hor 
-#- SeekBar 
-3. SeekBar (Discrete 
F3 QuickContactBad 
RatingBar 
* Switch 
上- Space 
Ab TextView 
sbc Plain Text 
& Password 


omponent Tree w- l 


I ScrollView 


E layout (RelativeLayout) 


iĝ imageViewHead (Roundh 
mc editTextName 
i» editTextPassword : 


œ buttonLogin- —— 
ok buttonRegister — 


11.3.3.1 
layout 中 使 用 目 定 义 控件 的 代码 如 下 : 


«niuedu.com.andfirststep.RoundImageView 
android:id-"8cid/imageViewHead" 
android:layout width-"200dp" 
android:layout height-"100dp" 
android:layout alignParentTop-"true" 
android:layout centerHorizontal-"true" 
android:layout marginTop-"24dp" 


app:borderColor-"8android:color/holo green dark" 


app:borderWidth-"2sp" 


app:drawable-"8drawable/female"/» 


此 时 会 产生 一 个 运行 时 错误 ， 原 因 是 在 LoginFragment 中 获取 了 这 个 控件 : 
editTextName - (EditText) v.findviewById(R.id.editTextName); 
editTextPassword = (EditText) v.findViewById(R.id.editTextPassword); 


imageView - .findviewById(R.id.imageViewHead); 


但 这 个 控件 被 我 们 改 成 了 RoundImageView， 而 不 再 是 一 个 ImageView， 所 以 此 处 的 类 型 
转换 不 再 合适 ，imageView 这 个 字段 的 类 型 也 不 再 合适 : 
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public class LoginFragment extends Fragment { 
EditText editTextName ; 


EditText editTextPassword; 


| ,lmageView imageView ; | 
RelativeLayout layout; 


我 们 可 以 把 类 型 改 为 RoundImageView 或 View. 


11.3.4 类 的 所 有 代码 


public class RoundlImageView extends View { 
private int mBorderColor - Color.RED; 
// Zaa hI RTR 
private Drawable mDrawable; 


private int mBitmapWidth; 

// BIER ÉI 

private int mBitmapHeight; 

// AEIR, FEHCE 

private float mDrawableRadius; 

// BIER], FELE 

private float mBorderRadius; 

private float mBorderStrokeWidth-1lf; 


// TEES, AE E ih AE IR TCR 
private BitmapShader mBitmapShader; 


/ LIBE TIBET AE EIER EIE 
private Paint mBitmapPaint; 
/ / AT ABIT PT ZR IET IBI: 


private Paint mBorderPaint; 


public RoundlImageView (Context context) 
super (context); 
inibUiunuli. Os 


public RoundlImageView(Context context, AttributeSet attrs) { 
super(context, attrs); 
init (attrs, 0); 


public RoundImageView (Context context, AttributeSet attrs, int defStyle) { 
super(context, attrs, defStyle); 
init(attrs, defStyle); 
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/ / EIAS 
private void init(AttributeSet attrs, int defStyle) { 
/ / BDR ELE X HEHA 
final TypedArray a = getContext ().obtainStyledAttributes( 
attrs, R.styleable.RoundiImageView, defStyle, 0); 


/ / XS X RHR E 

mBorderColor - a.getColor( 
R.styleable.RoundlImageView borderColor, 
mBorderColor); 

// FAEH EE (RR) 

mBorderStrokeWidth = a.getDimension( 
R.styleable.RoundlImageView borderWidth, 
mBorderStrokeWidth); 


if (a.hasValue(R.styleable.RoundlImageView drawable)) { 


// FEBR 
mDrawable = a.getDrawable(R.styleable.RoundlImageView drawable); 


// BB EM attrs HAURAS, ATEEIUE — R VA 


a.recycle(); 


if(mDrawable !- null) { 
//AM Drawable HRH Bitmap XR. /HT Él& BitmapShader 
//Drawable KÆ Android SDK X FORIRI Sil, 
/ / RIRH RTR REH HÆ Bitmap (MARAME 
Bitmap bitmap = getBitmapFromDrawable (mDrawable); 
if (bitmap==null1){ 


return; 
} 
// RE FERHIER 


mBitmapWidth = bitmap.getWidth(); 
mBitmapHeight - bitmap.getHeight (); 


// E BEER, TR LU T EISIBHYTBTISEx,. 
// 可 以 参考 Windows 背景 的 平 铺 模 式 
// 这 设置 成 不 平 铺 
mBitmapShader = new BitmapShader (bitmap, 
Shader.TileMode.CLAMP, 
Shader.TileMode.CLAMP); 


/ / Él£& BI Tz FIKI E 

mBitmapPaint - new Paint(); 

/ / TUBES AS E A IBI, 
mBitmapPaint.setShader (mBitmapShader); 


/ / Ef & BITE HIE 
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mBorderPaint - new Paint(); 

/ / RUBIZE TIR S 
mBorderPaint.setStyle(Paint.Style.STROKE); 

/ / ATE m A FAAR 
mBorderPaint.setFlags(Paint.ANTI ALIAS FLAG); 

// WEHEIBBIE 

mBorderPaint.setColor (mBorderColor); 

// WELHERBTÉE DETRAHI 

mBorderPaint.setStrokeWidth (mBorderStrokeWidth); 


QOverride 
protected void onDraw(Canvas canvas) { 
//super.onDraw (canvas); 
if(mDrawable == null)( 
return; 


/ / AA 
canvas.drawCircle(getWidth() / 2f, 
getHeight() / 2f, mBorderRadius, mBorderPaint); 
// BIER 
canvas.drawCircle(getWidth() / 2f, 


getHeight() / 2f, mDrawableRadius, mBitmapPaint); 


public Drawable getDrawable() { 
return mDrawable; 


public void setDrawable(Drawable drawable)í 
mDrawable - drawable; 
//M Drawable XIRJA Bitmap XR. /HT Él&&BitmapsShader 
Bitmap bitmap - getBitmapFromDrawable (mDrawable); 
// RB TEIR KI RA 
mBitmapWidth = bitmap.getWidth(); 
mBitmapHeight -bitmap.getHeight (); 


// SIL BEC ETE EE RARE 
updateShaderMatrix(); 
// IUDBAL, ERREEN (BRAWE, GRRE Wee T?) 


invalidate (); 


//M Drawable K Bitmap 
private Bitmap getBitmapFromDrawable(Drawable drawable) { 
if (drawable == null) { 


自 定 义 控 件 


197 


Android 9 编程 通俗 演义 


return null; 


if (drawable instanceof BitmapDrawable) { 
/ LIUBI REW, WMREA HENEB Drawable, HRA RH [nl 
return ((BitmapDrawable) drawable).getBitmap(); 


/ / AR Bh ERI (EZ res/drawable FHR W) , ANEEBLEZS— A 


try { 
Bitmap bitmap; 


if (drawable instanceof ColorDrawable) { 
/ / AA SVERRE, MIEIEE f^ BIB AUS — 1 IX HI Bitmap, 
/ / HERRE SSIBIAS ARGB PUE, SENE US TB. 
bitmap = Bitmap.createBitmap(l, 1, Bitmap.Config.ARGB 8888); 
) else { 
/ / W REÆRA MXH Drawable, MIÉy&& —-"f-5 EREA N IF iz Eg 
bitmap - Bitmap.createBitmap( 
drawable.getIntrinsicWidth(), 
drawable.getIntrinsicHeight(), 
Bitmap.Config.ARGB 8888); 


// lt Eh AXE drawable PHAR, AMUMA FEIEI& IBI T, 
// Æ drawable miih LE, SEE ER mA Y fe Eg E 
Canvas canvas - new Canvas (bitmap); 
// REE HIK, MAE x Tx XE 
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); 
drawable.draw(canvas); 
return bitmap; 
) catch (OutOfMemoryError e) { 
/ / AURI EA SEI, BFP null 


return null; 


// it R PIHI E AE EE 
private void updateShaderMatrix() { 
// ISTE E FA padding, HATUR ARATTAK K E 
int paddingLeft = getPaddingLeft(); 
int paddingTop - getPaddingTop(); 
int paddingRight = getPaddingRight (); 
int paddingBottom - getPaddingBottom(); 


//aTEUHMEHT E, IMBEXS TATOTEIIIRANBDKIBIS 
mBorderRadius - Math.min((getHeight() - mBorderStrokeWidth) / 2f, 
(getWidth() - mBorderStrokeWidth) / 2f); 


// CRIE KIS ENE, Pr PIN HERE HX ABE, 
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/ IZ PIETERA, [IBI AS 3E-E 48 padding HAJ 

RectF drawableRect = new RectF (mBorderStrokeWidth-paddingLeft, 
mBorderStrokeWidth-paddingTop, 
getWidth() - mBorderStrokeWidth-paddingRight, 
getHeight() - mBorderStrokeWidth-paddingBottom); 

/ TIRE lr PAIPA 8 

mDrawableRadius - Math.min(drawableRect.height() / 2f, 
drawableRect.width() / 2f); 


float scale; 
float dx = 0;//H/f& t x fl EJPÁGUIE EE 
float dy = 0;//H/f&rt y fl EJFAAUDZ BE 


// ZERRI, MFR RR HI RAAE 

Matrix mShaderMatrix = new Matrix(); 

mShaderMatrix.set (null); 

// REIR m ERHI, RITZAREN A TRU ETE HACIA BUS EU E Fr LC PIE 
if (mBitmapWidth * drawableRect.height() « drawableRect.width() * 


mBitmapHeight) { 


) 


/ / AUR ER T ACT TIERE BE. METR ABD ET KI E ERRIA ETE RECHT, 

/ 1 SERHERIBITHEE RI ABE HI EAE 

scale = drawableRect.height() / (float) mBitmapHeight; 

// PIBIÉR EAI EEE, WAtA X MERRE 

dx = (drawableRect.width() - mBitmapWidth * scale) * 0.5f; 
) else { 

/ / UPS HERE A PEE EE HERE, PR AES KI PEERI ENE SCR T, 

/ / fir d LU bit R ENR FWE HI E 

scale = drawableRect.width() / (float) mBitmapWidth; 

// ABR ESI EEE, DMAA y MERRE 

dy = (drawableRect.height() - mBitmapHeight * scale) * 0.5f; 
} 


// REMEE X BRI y HIA EE 
mShaderMatrix.setScale(scale, scale); 
// EE EIE x WA y HEHHEE, URURI RIE P 
mShaderMatrix.postTranslate( 
(int) (dx + 0.5f) + mBorderStrokeWidth, 
(int) (dy + 0.5f) + mBorderStrokeWidth); 


// PRRI REGA Oa 
mBitmapShader.setLocalMatrix (mShaderMatrix); 


QOverride 
protected void onSizeChanged(int w, int h, int oldw, int oldh) { 


super.onSizeChanged(w, h, oldw, oldh); 


updateShaderMatrix(); 
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我 们 最 终 要 模仿 出 一 个 QQApp。 
参考 一 下 QQ， 其 主页 面 显示 的 是 三 个 Tab 页 面 ， 三 个 页 面 分 别 是 “消息 ”“ 联 系 人 ”和 
“动态 ”。 这 三 个 页 面 中 都 使 用 了 共同 的 控件 : 列表 控件 。 列 表 控 件 在 各 种 App 中 随处 可 见 ， 
是 Android 中 非常 重要 的 一 个 控件 。 
原始 的 列表 控件 类 是 ListView, 新 的 列表 控件 类 是 RecyclerView。 两 者 的 基本 用 法 差别 不 
K, RecylerView 的 使 用 更 复杂 一 点 ， 在 功能 上 RecyclerView 比 ListView 强大 一 些 ， 所 以 我 们 
选择 RecyclerView 讲解 ， 搞 懂 后 再 学 习 ListView WS 5e 7G B. 


基本 用 法 


首先 记 住 一 点 : Android 中 ， 除 了 各 种 layout 控件 ， 只 要 是 能 包含 多 个 子 控件 的 ， 其 所 显 
示 的 子 控件 的 数量 和 子 控件 的 内 容 都 是 通过 Adapter (适配器 ) 提供 的 。 通 过 引入 Adapter， 这 
些 控件 具备 了 显示 与 数据 分 离 的 架构 。 

RecyclerView 中 的 一 个 条 目 就 是 一 个 子 控 件 , 但 子 控 件 的 内 容 是 什么 、 子 控件 如 何 啊 应 事 
fF, RecyclerView 完全 不 关心 。RecyclerView 只 负责 显示 其 子 控件 ， 排 列 其 子 控件 ， 滚 动 其 子 
控件 。 也 就 是 说 RecyclerView 只 实现 管理 多 个 条 目 ， 至 于 每 条 显示 什么 ， 它 不 管 。 那 么 ， 它 
不 管 谁 管 呢 ? ZH Adapter 管 ， 实 际 上 每 个 子 控件 是 由 Adapter 创建 的 ， 也 是 Adatper 设置 了 
每 条 的 内 容 。 

RecyclerView 与 Adapter 之 间 的 关系 是 这 样 的 : RecyclerView 在 显示 一 条 之 前 ， 先 调用 
Adapter 的 某 个 方法 获取 总 条 数 ; 再 调用 Adapter 的 某 个 方法 创建 这 个 条 目的 子 控件 ， 再 调用 
Adapter 的 某 个 方法 将 这 一 条 目 要 显示 的 数据 设置 到 子 控件 中 ,但 这 些 方法 是 需要 我 们 实现 的 ， 
所 以 最 终 是 我 们 决定 RecyclerView 中 的 条 目 数 和 条 目 内 容 。 所 以 RecyclerView 最 基本 的 用 法 

(1) 从 Adapter 派生 一 个 子 类 ， 实 现 其 中 的 方法 。 
(2) 将 Adpater 的 实例 设置 给 RecyclerView, RecyclerView 就 能 调用 Adpater 中 的 方法 。 


以 上 基本 用 法 完全 适用 于 ListView! 
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下 面 我 们 就 用 各 种 方法 玩 一 下 这 个 RecyclerView。 


显示 多 条 简单 数据 


先 从 最 简单 的 开始 ， 显 示 多 条 文本 。 


12.2.1 添加 新 页 面 
根据 前 面 所 说 的 基本 用 法 ， 我 们 应 从 Adpater 派生 一 个 子 类 。 但 在 这 之 前 ， 我 们 需要 把 显 
示 列 表 的 页 面 创建 出 来 。 添 加 一 个 新 的 Fragment, Anf 12.2.1.1 所 示 。 


Reformat Code Ctrl+Alt+L 
Optimize Imports 


Ctrl+Alt+0 '® Activity » anager = getSupp 
i ientTransaction 
Local History , * Android Auto , l 
iğ Folder , new LoginFragme 


C) Synchronize 'app' 
Fragment (Blank) 
Show in Explorer G » [3 Fragment (List) 
Directory Path Ctrl - Alt «F12 » [ Fragment (with a 
Éà Compare With... i » [L Modal Bottom Sh 


122.1.1 
选择 Fragment(Blank) 项 吧 ， 我 们 使 用 一 个 空白 Fragment， 自 行 添 加 控件 。 这 个 页 面 将 来 
要 用 于 显示 音乐 列表 ， 所 以 把 它 叫 作 MusicListFragment， 如 图 12.2.1.2 所 示 。 
Creates a blank fragment that is compatible back to API level 4. 
Fragment Name: MusicListFragment 
Create layout pes 


Fragment Layout Name: fragment music list 


[ Include fragment factory methods? 


o> | ) include interface callbacks? 


Target Source Set: | main 


图 12.2.1.2 


注意 不 要 选中 “Include fragment factory methods (包含 工厂 方法 ) " M “Include interface 
callback〈 包 含 回 调 接口 ) ”， 前 和 面 讲 过 原因 ， 我 们 并 不 想 让 Fragment 与 Activity f£. rU 
就 不 需要 这 两 样 东 西 ， 如 果真 需要 ， 我 们 可 以 手工 创建 之 。 

增加 了 两 个 文件 : MusicListFraement.java 和 layout/fragment music list.xml。 修 改 layout 
资源 文件 ， 添 加 RecyclerView 控件 ， 如 图 12.2.1.3 所 示 。 
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Palette Q 类 -有 [E SM ©- DNeus4- mes- Ò; 
E N 


Containers | Œ CardView 
Images | Ha GridLayout 
Date RecyclerView 
Transitions | 1 Toolbar 
Advanced 

Google 

Design 


^ppCompat 


AndFirstStep 


RecyclerView 
Component Tree 


D FrameLayout 


图 12.2.1.3 


RecyclerView 在 AppCompat 组 中 ， 这 说 明 什 么 来 ? 还 记得 吗 ? 它 说 明 RecyclerView 是 一 
个 能 兼容 Android 低 版 本 的 控件 .把 RecyclerView 拖 到 内 容 区 ,让 它 充满 整个 空间 , 如 图 12.2.1.4 
所 示 。 


Properties 


ID 
layout width 
layout height 


musicListView 


match parent 


match parent 


RecyclerView 


scrollbars 


# listitem 


background 


clipToPadding 
clipChildren 
Favorite Attributes 
visibility 


none 


12.2.14 


在 属性 编辑 器 中 可 以 看 到 ， 默 认 下 这 个 控件 就 是 充满 整个 空间 的 (match parent). RIEC 
的 ID 设置 成 了 “musicListView”， 因 为 我 们 要 在 代码 中 操作 它 。 如 何 显示 这 个 页 面 呢 ? 登录 
成 功 之 后 就 显示 ， 所 以 我 们 修改 登录 按钮 啊 应 方法 ， 显 示 音 乐 列表 页 面 : 


// RUR, Mv click Aff 
buttonLogin.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
FragmentManager fragmentManager = 
getActivity().getSupportFragmentManager (); 


FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 
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MusicListFragment fragment = new MusicListFragment (); 
/ / EARN EZB Zu 


fragmentTransaction.setTransition(FragmentTransaction.TRANSIT FRAGMENT OPEN) 


// BH FrameLayout PRAHI Fragment 
fragmentTransaction.replace(R.id.fragment container, fragment); 
/ I OX OCUIAIA EAR EE P, IET UEA TBR A IAS [n] E — fs ELIT 
fragmentTransaction.addToBackStack("music list"); 
fragmentTransaction.commit (); 


12.2.2 创建 Adapter 子 类 


在 类 MusicListFragment 中 ， 创 建 一 个 private 内 部 类 ， 叫 作 MyAdapter， 它 从 
RecyclerView.Adapter 派生 ,可 以 看 到 使 用 的 是 RecyclerView 类 内 部 的 Adapter 类 。 注 意 Adapter 
类 存在 多 个 ， 因 为 能 容纳 子 控件 的 这 些 控件 们 , 给 它们 提供 数据 的 方式 不 一 样 ， 所 以 都 需要 有 
自己 的 Adpater 类 ， 内 部 类 当然 是 一 个 好 选择 ， 名 字 可 以 相同 ， 一 看 就 知道 是 做 什么 用 的 。 

注意 RecyclerView.Adapter 是 一 个 范 型 类 : 


public static abstract class Adapter<VH extends ViewHolder> { 


在 使 用 它 的 时 候 ， 需 要 传 入 一 个 类 型 作为 范 型 参数 ， 即 尖 括 号 里 规定 的 类 型 。VH extends 
ViewHolder 表示 这 个 类 型 必须 是 一 个 从 ViewHolder 派生 出 来 的 类 。 所 以 我 们 实际 上 在 创建 
Adapter 的 子 类 之 前 ， 需 要 先 定义 一 个 ViewHolder 的 子 类 。 那 么 我 们 创建 一 个 叫 作 
MyViewHolder 的 子 类 ， 作 为 MusicListFragment 的 内 部 类 : 

private class MyViewHolder extends RecyclerView.ViewHolderí 
public MyViewHolder (View itemView) { 


super (itemView); 


) 


派生 类 很 简单 ， 只 需要 实现 一 个 构造 方法 即 可 ， 而 且 构 造 方法 内 其 实 也 没 做 什么 处 理 。 
它 的 名 字 叫 ViewHolder， 它 就 是 用 来 Hold f£ View 的 ，View 指 的 是 条 目 控件 。 下 面 就 可 
以 创建 Adapter 类 了 ， 把 MyViewHoler 类 传 给 范 型 参数 。 其 定义 如 下 : 


private class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{ 
QOverride 
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
return null; 
} 
QOverride 
public void onBindViewHolder (MyViewHolder holder, int position) { 


) 
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QOverride 
public int getItemCount () { 


return 0; 


) 


从 这 个 类 派生 ， 至 少 实现 三 个 方法 ， 这 三 个 方法 叫 回调 方法 ， 因 为 是 由 我 们 实现 而 由 别人 
调用 ， 所 以 叫 回 调 方法 。 是 被 谁 调用 呢 ? RecyclerView WE! 前 面 讲 过 了 。 它 们 的 作用 分 别 是 : 

€ onCreateViewHolder(0 是 当 RecyclerView 需要 创建 一 行 的 控件 时 调用 ， 在 方法 内 要 创 
建 一 行 所 用 的 控件 并 返回 这 个 控件 ; 

€  onBindViewHolder() € 3i RecyclerView 需要 为 某 一 行 绑 定 数据 时 调用 , 在 方法 内 为 这 
一 行 的 控件 设置 这 一 行 应 显示 的 内 容 ; 

€  getltemCount()€ 3i RecyclerView 需要 知道 一 共 要 显示 多 少 行 时 调用 ， 在 方法 内 需要 
返回 行 数 。 

下 面 分 别 实 现 这 三 个 方法 : 


(1) 实现 onCreateViewHolder() 


QOverride 
public MyViewHolder onCreateViewHolder (ViewGroup parent, int viewType) { 
TextView textView = new TextView(getContext ()); 


MyViewHolder viewHolder = new MyViewHolder(textView); 
return viewHolder; 


这 个 方法 返回 对 应 行 的 控件 ,现在 一 行 很 简单 ， 束 是 显示 一 条 文本 ， 那 么 一 个 文本 控件 就 
人 够 了 了 ， 所 以 首先 创建 了 一 个 文本 控件 ， 然 后 又 创建 了 ViewHolder 对 象 ， 把 文本 控件 放 到 了 
ViewHolder 中 。RecyclerView 实际 上 感 兴 趣 的 是 控件 ， 但 你 必须 用 一 个 ViewHolder X hold 
Eis 


(2) 实现 onBindViewHolder() 


QOverride 
public void onBindViewHolder(MyViewHolder holder, int position) { 
TextView textView = (TextView)holder.itemView; 
if (position--0)[í 
textView.setText (" 我 是 第 1 行 ") ; 
Jelse if(position--1)(í( 
textView.setText ("RES 21T"); 


}else if (position==2){ 
textView.setText ("RES 317"); 


} 


这 个 方法 用 于 为 每 行 设置 不 同 的 数据 。 所 以 我 们 先 从 传 入 的 holder 中 取出 View， 它 就 是 
在 onCreateViewHolder0 中 创建 的 那个 View, 然后 根据 参数 position 来 确定 要 设置 的 是 第 几 行 ， 
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不 同 的 行 设置 不 同 的 文本 。 

为 什么 不 在 创建 某 一 行 的 控件 时 就 设置 不 同 的 值 呢 ? 这 是 为 了 重用 控件 ,节省 内 存 。 行 控 
件 重用 是 这 样 进行 的 : 如 果 页 面 中 能 显示 10 行 (这 取决 于 你 每 一 行 的 高 度 ) ， 那 么 这 10 行 中 
每 一 行 都 是 不 同 的 View 实例 ， 但 是 列表 控件 的 内 容 都 是 可 以 滚动 的 ， 如 果 它 有 30 行 的 话 ， 
那么 就 有 20 行 是 看 不 到 的 ， 只 需要 有 10 个 行 控 件 就 够 用 了 ， 当 滚动 时 ， 移 出 显示 区 的 行 控 件 
被 回收 , 移入 显示 区 的 行 不 会 再 创建 新 控件 ， 而 是 利用 回收 的 控件 ， 重 新 设置 其 内 容 ， 这 就 是 


(3) 实现 getItemCountO 


QOverride 
public int getItemCount () [| 


return 3; 


} 
很 简单 ， 就 返回 3， 表示 共有 3 行 。 注 意 这 个 数 不 能 随意 写 ， 必 须 与 onBindViewHolder() 
配合 ， 那 里 面 处 理 了 0、1、2 三 个 position， 此 处 必须 对 应 起 来 。 
Adapter 准备 好 了 ， 还 需要 加 Adapter 的 实例 设置 给 RecyclerView 才 行 。 


12.2.3 i& & RecyclerView 


在 MusicListFragment 类 中 为 RecyclerView 添加 对 应 的 成 员 变 量 : 


public class MusicListFragment extends Fragment { 
private RecyclerView musicListView; 
在 onCreateView0O 中 获取 RecyclerView 并 设置 它 ， 代 码 如 下 : 


QOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
// Inflate the layout for this fragment 
View view- inflater.inflate(R.layout.fragment music list, container, 
false); 


musicListView - (RecyclerView) view.findViewById(R.id.musicListView); 
musicListView.setLayoutManager (new LinearLayoutManager (getContext ())); 
musicListView.setAdapter (new MyAdapter ()); 


return view; 


可 以 看 到 在 加 载 layout 资源 后 ， 把 最 外 层 的 控件 保存 在 变量 view 中 ， 然 后 我 们 通过 view 
获取 到 RecyclerView， 然 后 为 它 设置 了 LayoutManager 和 适配器 。 此 处 出 现 个 新 东西 : 
LayoutManager, té layout 管理 器 ， 用 于 决定 子 控件 的 排列 方式 。 实 际 上 把 RecyclerView fX. 
仅 看 作 列 表 控 件 就 太 肤浅 了 , 因为 它 不 仅 能 按 行 来 排列 子 控件 , 它 还 可 以 按 栅 格 的 方式 排列 子 
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控件 们 ， 而 这 仅仅 设置 不 同 的 LayoutManager 即 可 。 我 们 现在 设置 的 是 LinearLayoutManager 
(线性 管理 器 ) ， 它 使 得 子 控件 按 行 排列 ， 当 你 改 为 GridLayoutManager 时 ， 就 以 栅 格 形式 显 
示 。 先 运行 一 下 App， 看 一 下 线性 管理 器 的 效果 ， 如 图 12.2.3.1 所 示 。 再 改 成 栅 格 管理 器 : 


创建 栅 格 管理 器 时 参数 增多 了 ， 增 加 的 这 个 参数 表示 列 数 ， 我 们 设置 为 2 列 ， 效 果 如 图 
12.2.3.2 所 示 。 


图 12.2.3.1 图 12.2.3.2 


怎么 样 ? RecyclerView 很 牛 吧 ? 因为 后 面 我 们 主要 演示 列表 的 形式 ， 所 以 我 们 把 
LayoutManager 再 恢复 成 LinearLayoutManager 。 


12.2.4 用 集合 保存 数据 


在 实际 的 项 目 中 ， 我 们 不 可 能 像 onBindViewHolder0 中 那样 用 让 去 判断 当前 的 position. 
比如 有 一 千 条 数据 ， 我 们 难道 要 写 一 干 个 if 判断 ?正确 的 做 法 应 该 是 用 集合 来 保存 数据 。 因 
为 有 顺序 ， 所 以 最 好 用 Array 或 List 来 保存 数据 ， 又 由 于 大 多 数 情况 下 数据 是 可 变 的 ， 所 以 
List 得 的 最 多 。 下 面 我 们 也 改 为 用 List 来 保存 各 行 的 数据 : private List<String> data = new 
ArrayList<>(); ， 这 个 集合 对 象 应 放 在 哪里 呢 ? 根据 经 验 , 放 在 RecyclerView 所 在 的 类 最 合适 ， 
就 是 MusicListFragment 25. 

我 们 回 它 添加 一 些 字 符 串 作为 每 行 的 内 容 : 

public MusicListFragment() { 
data .add ("我 是 第 0 11") ; 


data .add ("我 是 第 1 行 "); 
data .add ("我 是 第 2 fT") ; 
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data .add ("我 是 第 3 行 ") ; 
data .add ("我 是 第 4 17"); 


data .add ("我 是 第 5 行 "); 


因为 应 该 在 为 RecyclerView 设置 Adapter 之 前 就 准备 好 数据 , 所 以 我 干脆 把 上 面 这 段 代 码 
放 到 了 Fragment 的 构造 方法 中 了 。 下 一 步 ， 改造 Adapter 的 回调 方法 , 把 List 与 RecyclerView 
关联 起 来 …… 改 造 完了 ， 代 码 如 下 : 


private class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{ 
QGOverride 
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
TextView textView = new TextView(getContext ()); 
MyViewHolder viewHolder = new MyViewHolder (textView); 
return viewHolder; 


) 


QGOverride 
public void onBindViewHolder (MyViewHolder holder, int position) { 
TextView textView = (TextView)holder.itemView; 


String text = data.get (position); 
textView.setText (text); 


) 


QOverride 
public int getItemCount() { 
return data.size(); 


) 


onBindViewHolder0 方 法 发 生 了 改变 ， 在 设置 茶 行 的 数据 时 ， 不 再 需要 用 让 去 比较 行 号 ， 
而 是 直接 根据 行 号 从 数组 (data) 中 取出 对 应 的 字符 串 。getItemCountO 方 法 也 发 生 了 改变 ， 返 
回 的 数量 不 再 是 一 个 第 量 ， 而 是 由 数组 (data) 决定 。 注 意 此 data 这 个 变量 ， 它 是 
MusicListFragment 的 字段 ， 但 是 由 于 MyAdapter 是 MusicListFragment 的 非 静 态 内 部 类 ， 上 所 以 
可 以 直接 使 用 外 部 类 的 非 静 态 变 量 。 


让 子 控 件 复 杂 起 来 


前 面 演示 RecyclerView 中 每 一 条 的 内 容 太 简单 。 而 我 们 见 到 的 App 中 , 每 一 条 都 很 复杂 ， 
比如 图 12.3.1 所 示 的 例子 。 

下 面 就 让 我 们 的 列 中 的 每 一 条 也 复杂 起 来 . 要 显示 复杂 的 内 容 , 必须 数组 中 的 数据 也 足够 
复杂 。 我 们 想 在 每 行 中 显示 音乐 信息 ， 每 条 音乐 信息 包括 歌手 图 片 、 歌 手 名 、 歌 曲名 、 播 放 次 
数 。 而 且 我 们 希望 用 户 点 歌手 图 标 时 ， 显 示 此 歌手 的 信息 以 及 它 的 歌曲 ， 而 在 歌手 图 标 之 外 点 
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击 时 ， 进 入 歌曲 播放 页 面 ， 开 始 播放 歌曲 。 


好 评 商 机 


节假日 保 额 更 高 更 人 不 跟 车 
创业 基金 :5 万 -=3 
好 评 数 :200 > 


节假日 保 额 更 高 更 人 不 跟 车 
创业 基金 :5 万 -= 
好 评 数 :200 > 


节假日 保 额 更 高 更 人 不 跟 车 
四 ”创业 基金 :5 万 := 
好 评 数 :200 > 


节假日 保 额 更 高 更 人 不 跟 车 


创业 基金 :5 万 -25 
好 评 数 :200 = 


12.3.1 


12.3.1 创建 条 目的 Layout 资源 

每 一 行 都 这 么 复杂 , 如 果 用 代码 创建 行 控 件 中 的 子 控件 , 要 摆 放 好 控件 们 的 位 置 是 相当 且 
烦 ， 那 么 能 不 能 在 layout 资源 中 设计 行 的 布局 呢 ? 当然 可 以 ! 马上 创建 一 个 layout 资源 ， 命 名 
X “music list item.xml”， 设 计 其 界面 如 图 12.3.1.1 所 示 。 


AndFirstStep 
XE 


Ig € —^ E LRA 
$x 


12314 
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注意 这 个 图 虽然 看 起 来 是 一 个 手机 页 面 , 但 里 面 的 资源 仅仅 是 用 于 列表 控件 的 一 条 的 。 界 
面 编辑 器 并 不 知道 我 们 要 用 到 什么 地 方 ， 所 以 就 按 一 个 手机 屏幕 的 样式 显示 预览 。 

£T Layout 中 ， 左 边 是 一 个 图 片 控件 ， 右 边 由 三 行 控件 组 成 ， 上 面 是 TextView， 显 示 歌 手 
名 字 ; 中 间 是 TextView, 显示 歌曲 名 ; 下 面 是 RatingBar, 显示 受 奶 捧 程 度 。 要 实现 这 样 的 Layout， 
有 多 种 方案 。 可 以 使 用 RelativeLayout 直接 包含 这 四 个 控件 ， 设 置 它们 之 间 的 相对 位 置 ， 也 可 
以 用 ConstraintLayout; 但 是 我 感觉 最 容易 达成 的 方式 是 使 用 多 个 LinearLayout 的 组 合 。 组 合 
方式 是 这 样 的 ， 如 图 12.3.1.2 所 示 。 


Component Tree ÓXt- l- 


v 到 LinearLayout (horizontal) 


网 imageView 
v MM LinearLayout (vertical) 
Ab textViewSinger - ^  - 
Ab textViewTitle - — 
ratingBar 


12.3.12 


最 外 层 是 一 个 横 回 的 LinearLayout， 它 包含 一 个 图 像 和 一 个 纵 回 的 LinearLayout， 这 个 纵 
向 的 LinearLayout 又 包含 了 歌手 名 、 歌 曲名 、 星 级 评价 三 个 控件 。 但 是 ， 你 还 要 设置 一 下 各 控 
件 的 属性 ， 使 它们 排列 美观 。layout 文件 的 代码 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:orientation-"horizontal"» 


«ImageView 
android:id-"8-cid/imageView" 
android:layout width-"lO00dp" 
android:layout height-"l00dp" 
app:srcCompat-"G8drawable/music default" /> 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:orientation-"vertical"» 


«TextView 
android:id-"Q-c-id/textViewSinger" 
android:layout width-"wrap content" 


android:layout height-"wrap content" 

android:text-"/FfífE" 
android:textAppearance-"style/TextAppearance.AppCompat.Large" 
android:textColor-"Gandroid:color/holo purple" /> 
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«TextView 
android:id-"Q-cid/textViewTitle" 
android:layout width-"match parent" 
android:layout height-"Odp" 
android:layout weight-"1" 
android:gravity-"center vertical" 


android:text=" 一 个 爱 上 浪 旭 的 人 " 


android:textAppearance-"8style/TextAppearance.AppCompat.Medium" 


android:textColor-"G8android:color/holo blue dark" /> 


«RatingBar 
android:id-"G8-cid/ratingBar" 
style-"8style/Widget.AppCompat.RatingBar.Small" 
android:layout width-"wrap content" 
android:layout height-"20dp" 
android:rating-"2" /» 
«/LinearLayout» 


«/LinearLayout» 
我 们 做 了 以 下 工作 : 


e 图像 控 件 的 宽 和 高 都 固定 成 了 100dp， 这 样 不 论 实际 图 像 的 大 小 和 宽 高 比 ， 都 以 按 比 
例 拉 伸 的 方式 显示 ， 使 各 行 的 图 像 大 小 看 起 来 比较 一 致 。 

@ 了 最 外 层 的 LinearLayout 其 宽 充 满 整 个 父 控 件 ,， 但 是 其 高 由 子 控件 的 高 度 之 和 决定 ， 其 
实 是 由 图 像 控 件 决定 ， 因 为 它 最 高 。 

© 纵向 LinearLayout 其 宽 为 配 匹 父 控 件 , 由 于 同一 行 被 图 像 控 件 占 了 一 部 分 ,所 以 它 就 
充满 了 剩余 的 空间 。 纵 向 上 充满 了 父 控件 。 

© ”纵向 LinearLayout 中 的 三 个 控件 ， 上 面 的 靠 上 ， 下 面 的 靠 下 ， 中 间 剩 余 空 间 被 中 间 控 
件 充 满 。 要 做 到 这 种 排版 ， 中 间 控 件 的 layout weight ( 比重) 需 为 1， 上 下 两 个 控件 
需 有 明确 的 高 度 ， 那 么 它们 有 吗 ? 有 ， 都 是 由 内 容 决 定 (wrap content) 。 注 意 如 果 对 
一 个 控件 设置 了 layout weight， 那 么 它 的 宽 或 高 需 为 0dp， 到 底 该 设置 宽 还 是 高 需 看 
此 控件 在 横向 LinearLayout 还 是 纵向 LinearLayout 中 。 

€  Ratingbar 的 小 星星 必须 用 style 属性 去 设置 它 的 大 小 。 

e 剩余 各 控件 的 属性 自己 玩 玩 就 知道 什么 意思 了 ， 这 里 不 再 解释 .。 


12.3.2 WAZH Layout 资源 

定义 好 了 每 一 行 的 layout 资源 , 如 何 把 这 个 资源 利用 起 来 呢 ? 相信 你 已 经 想到 了 , Adapter 
类 的 回调 方法 onCreateViewHolder0 是 用 于 创建 并 返回 行 控件 的 ， 我 们 只 要 在 其 中 利用 layout 
资源 创建 出 行 控 件 并 返回 即 可 。 代 人 码 如 下 : 


public MyViewHolder onCreateViewHolder (ViewGroup parent, int viewType) { 
LayoutInflater inflater - getLayoutInflater (null); 


View view = inflater.inflate(R.layout.music list item,parent,false); 
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MyViewHolder viewHolder = new MyViewHolder (view); 
return viewHolder; 


这 个 方法 内 加 载 了 行 Layout 资源 ， 创 建 出 控件 ， 然 后 把 控件 包 在 ViewHoler 中 返回 。 创 
建 控 件 使 用 了 LayoutInflater 实例 , 但 是 这 个 对 象 不 是 new 出 来 的 ， 而 是 使 用 Fragment 的 方法 
getLayoutInflater()3& HX]. LayoutInflater 的 方法 inflate0 根 据 Layout 资源 来 创建 控件 ， 它 的 第 
一 个 参数 是 layout 资源 , 第 二 个 参数 是 创建 的 控件 的 父 控件 , 第 三 个 参数 是 Boolean 型 , 为 true 
时 表示 创建 出 来 的 控件 会 放 到 父 控 件 中 ， 知 为 false 则 不 会 ， 但 是 parent 参数 中 包含 了 控件 的 
排版 参数 (LayoutParams) 。 需 要 注意 的 是 ， 我 们 第 三 个 参数 传 入 了 false， 如 果 你 传 入 true, 
那 是 不 可 以 的 ， 会 引起 问题 的 。 

我 想 提出 一 个 问题 ，inflate0 方 法 返回 的 View 是 谁 呢 ? 我 直接 回答 吧 : 它 是 行 控件 树 中 最 
外 面 那 个 ， 也 就 是 横 癌 的 LinearLayout. 

你 还 要 修改 一 个 方法 : onBindViewHolder0， 原 先 绑 定 TextView 的 做 法 已 不 适用 ， 清 除 
它 的 内 容 即 可 : public void onBindViewHolder(MyViewHolder holder, int position) ( }。 至 于 男 一 
个 方法 getItemCount0， 只 是 决定 行 数 ， 不 用 改 它 。 现 在 运行 试 试 吧 ， 是 不 是 登录 后 出 现 了 如 
图 12.3.2.1 所 示 的 界面 ? 


€ —4 2 HRIBA 
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** 


图 12.3.2.1 


看 起 来 还 不 错 , 但 是 感觉 两 处 不 足 挺 明 显 。 一 处 是 图 片 与 文字 内 容 徘 得 太 近 , 一 处 是 行 之 
间 没 有 分 界线 。 第 一 个 不 足 好 解决 ， 只 需要 为 纵 问 LinearLayout 设置 左边 的 外 空白 即 可 ,如 图 
12.3.2.2 所 示 。 
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Layout Margin [2 10dp, ?, ?, ?] 


layout margin 
AndFirstStep yout marg 


[一 


O ü-^2 ERHEA layout marginEnd 


gt .4—— layout marginLeft 10dp 


layout marginRigh 


layout marginBott: 


layout marginStarl 


layout marginTop 


Padding [?, ?, ?, ?, ?] 
Theme 

elevation 

orientation vertical 
accessibilityLiveRegion 
accessibilityTraversalAf 
accessibilityTraversalBe 


12.322 


男 一 个 不 足 就 不 好 解决 了 ， 后 事 如 何 ， 下 节 分 解 。 


12.3.3 ”明显 区 分 每 一 行 


可 能 你 首先 想到 的 是 在 每 行 之 间 显 示 一 条 线 ， 但 其 实 有 更 简单 的 办 法 : 使 用 CardView。 
可 以 在 这 里 找 它 ， 如 图 12.3.3.1 所 示 。 


Palette ÓXt- l- 
Common = 

:三 RecyclerView 

I ScrollView 

I HorizontalScrollView 
lli NestedScrollView 
Layouts  [P]] ViewPager 


Containers B CardView 


Google ^] Tabs 
P] AppBarLayout 


H] NavigationView 

[EJ BottomNavigationV.. 
FA Toolbar 

lila TabLayout 

C3 Tabitem 


Text 
Buttons 


Widgets 


12.3.3.1 


你 把 它 拖 到 Layout 的 控件 树 中 ， 随 意 放 个 地 方 。 这 一 步 会 触发 Android Studio 提示 你 添 
加 包含 CardView 的 库 依 赖 ， 如 果 不 这 样 添加 ， 你 就 要 手动 添加 ， 如 下 (build.gradle 文件 中 ) : 


至 于 版 本 号 ， 因 为 你 在 看 此 书 时 ， 此 库 的 版 本 肯定 升级 了 。 
实际 上 我 们 不 能 随意 放置 CardView， 我 们 应 把 它 作为 一 行 最 外 层 的 容器 。 怎 么 弄 呢 ? 只 
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能 直接 改 源码 了 ， 修 改 后 如 下 : 


<?xml version-"1.0" encoding="utf-8" ?> 
«android.support.v/.widget.CardView 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"wrap content"» 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:orientation-"horizontal"» 
«/LinearLayout» 
«/android.support.v7.widget.CardView» 


可 以 看 到 原来 最 外 层 的 元 素 成 了 Card View 的 儿子 ， 而 且 把 xmlns 属性 移 到 了 最 外 层 元 素 
上 。CardView 只 能 有 一 个 儿子 ， 所 以 还 需要 一 个 原来 的 LinearLayout 包含 其 他 控件 。 需 要 注 
意 的 是 CardView 的 高 度 也 应 该 由 内 容 决 定 。 还 没完 ， 你 还 要 给 CardView 设置 一 些 属性 ， 如 
图 12.3.3.2 所 示 。 


EB ©- [Neusa4- 25- Properties 
© 30% © O 4 " 
RR 5 ki layout width match parent 
layout height wrap content 
> Constraints 
* Layout Margin 
AndFirstStep 
layout margin 
layout marginBottom 
layout marginEnd 
layout marginLeft 
layout marginRight 
layout marginStart 
layout marginTop 


» Padding EGER 


» Theme 
elevation 


ON ll @android:colorholo green ligF 
cardCornerRadius 10dp 


12.3.3.2 


€ Layout margin: 使 得 行 之 间 有 空白 (上 、 下 、 左 、 右 都 有 ) 。 
€  cardBackgroundColor: 设置 CardView 的 背景 色 。 
€  cardCornerRadius: 设置 CardView 的 四 角 为 圆 角 ， 指 定 圆 角 的 半径 为 10dp。 


运行 看 看 效果 吧 ， 如 图 12.3.3.3 所 示 。 
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12.3.3.3 


现在 还 剩 下 的 最 大 问题 是 每 行 的 内 容 都 一 样 ， 现 在 大 家 都 知道 ， 要 改变 这 个 问题 ， 需 要 实 
现 Adapter 的 onBindViewHolder0 方 法 。 但 是 我 们 还 要 先 改变 一 下 提供 数据 的 数组 ， 让 它 的 每 
一 项 都 复杂 起 来 ， 以 适应 行 控件 。 那 么 需要 创建 一 个 类 ， 数 组 的 每 一 项 都 是 这 个 类 的 实例 。 后 
事 如 何 ， 下 节 分 解 。 


12.3.4 创建 音乐 信息 类 


public class MusicInfo { 
private String singer; //KFE 
private String title; // KME 
private int like; // 2f 


本 来 这 个 类 应 该 有 四 个 属性 , 但 我 只 弄 了 三 个 ， 因 为 图 像 我 暂时 不 想 变 ， 后面 会 用 专门 的 
库 操 作 列 表 控 件 中 的 图 像 ， 现 在 就 是 做 个 样子 。 遵 从 封装 原则 ， 类 的 变量 我 们 全 置 为 私有 ， 然 
后 用 Getter 和 Setter 来 访问 它们 。 那 么 我 们 需要 为 各 变量 添加 Getter 和 Setter， 不 用 一 个 个 添 
加 ， 如 图 12.3.4.1 所 示 。 

在 类 名 上 点 出 右键 菜单 ， 选 择 “Generate (产生 ) ”， 出 现 如 图 12.3.4.2 所 示 的 菜单 。 


M ci I "m Ls 

MIDI z class $ ? zm Copy Reference Ctrl- Alt «Shift C 
private String 
: c Paste Ctrl+V 

private String _ 
private int lik Paste from History... Ctrl * Shift « V 
) Paste Simple Ctrl- Alt « Shift« V 
Column Selection Mode Alt+ Shift -- Insert 
Find Usages Alt--F7 
Find Sample Code Alt-F8 

Refactor 


Folding 


Generate 


Constructor 
Getter 
Setter 


Getter and Setter 


Analyze 
Go To 


equals0 and hashcode0 
toStringO 

Override Methods... Ctrl+O 
Delegate Methods... 

Copyright 


Local History 


Compare with Clipboard 
File Encoding 
@ create Gist... 


图 12.3.4.1 12.3.4.2 
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选择 “Getter and Setter" , "n 12.3.4.3 所 示 。 

按 下 Shift 键 , 然后 用 鼠标 选中 三 个 成 员 变 量 , 点 OK, 然后 , 一 堆 Getter 和 Setter 出 现 了 ， 
于 是 ,这 三 个 变量 就 成 了 属性 。 我 们 还 希望 在 创建 音乐 信息 对 象 时 就 把 这 三 个 属性 的 值 传 给 它 ， 
那么 就 需要 创建 构造 方法 , 也 不 用 目 己 写 , 在 类 上 点 出 右键 菜单 , 点 “Generate”, 如 图 12.3.4.4 
所 示 。 


f^ Select Fields to Generate Getters and Setters 


Getter template: Intelli) Default m 
Setter template: Intelli) Default M - 


42 [«] 2 F | Generate 
v (€ niuedu.com.andfirststep.MusicInfo 
singer:String Getter 
title:String setter 
like:int Getter and Setter 
equals() and hashCode() 
toString() 
Override Methods... Ctrl -O 
Delegate Methods... 
Copyright 
图 12.3.4.3 12.344 


选择 “Constructor Hg) " , n 12.3.4.5 所 示 。 
e Chi 


d: 
Y € niuedu.com.andfirststep.MusicInfo 


f 8 singerString 
‘1 & title:String 


^4 8 like:int 


ERE e 


图 12.3.4.5 
按 下 Shift， 选 中 所 有 成 员 变量 需要 谁 有 对 应 的 构造 方法 参数 ， 就 选 谁 ) ， 点 OK， 于 是 
一 个 构造 方法 出 现 了 。 
12.3.5 ”使 用 音乐 信息 类 


存放 列表 数据 的 List 中 ， 每 一 项 都 要 变 成 MusicInfo 的 实例 ， 所 以 List 变量 的 定义 改 为 : 
private List«MusicInfo» data = new ArrayList«»(); 为 这 个 数组 填充 数据 的 代码 也 要 改 一 


F: 
public MusicListFragment() { 
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.add (new MusicInfo(" 马 云云 ", " 踩 蘑菇 的 小 姑娘 " ,4) ) ; 
.add (new MusicInfo (" 贝 克 汗 脚 ", "我 是 真 的 还 想 再 借 五 百 元 ", 2) ) ; 
.add (new MusicInfo(" 杰 克 孙 ", "一 行 白 鉴 上 西天 " ,2) ) ; 


.add (new MusicInfo ("/Ff&jfEnv,"—^M3X5 EROS A ",2) ) ; 
.add (new MusicInfo(" 王 钢 烈 ", "菊花 残 ", 5) ) ; 
.add (new MusicInfo(" 罗 金 凤 ", "一 天 到 晚 游 泳 的 驴 " ,4) ) ; 


Adapter 类 的 绑 定 数据 的 方法 也 要 改 一 下 : 


QOverride 
public void onBindViewHolder(MyViewHolder holder, int position) { 
/ / JC E TS HIT HIEI 
View v-holder.itemView; 
// BRIT P d a EE UTR 
TextView viewSinger = (TextView) v.findViewById(R.id.textViewSinger); 
TextView viewTitle- (TextView) v.findViewById(R.id.textViewTitle); 
RatingBar ratingBar = (RatingBar) v.findViewById(R.id.ratingBar); 
// YEA x — fr» List 项 
MusicInfo musicInfo = data.get (position); 
// RAIE IE BE SIN EH TER 
viewSinger.setText (musicInfo.getSinger()); 
viewTitle.setText (musicInfo.getTitle()); 
ratingBar.setRating (musicInfo.getLike()); 


HolderitemView 就 是 onCreateViewHolder0 中 创建 的 View， 它 是 行 的 根 View。 注 意 
RatingBar， 在 资源 文件 中 ， 并 没有 设置 星星 的 数量 (starNum) ， 其 默认 显示 5 个， 而 我 们 创 
建 的 歌曲 信息 对 象 ， 其 like 属性 的 值 〈 构 造 方法 的 第 3 个 参数 ) 也 没有 超过 5， 所 以 能 正确 地 
显示 出 星 级 ， 运 行 之 ， 结 果 如 图 12.3.5.1 所 示 。 


12.3.5.1 
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增删 改 


只 显示 没意思 ， 我 们 还 需要 能 对 列表 进行 增删 改 。 


12.4.1 增加 一 条 


第 12$  RecyclerView 


首先 回忆 一 下 ， 列 表 探 件 的 内 容 是 谁 提供 的 ? 是 Fragment 类 中 的 List 变量 data. Sz bg EL 
要 增加 一 条 , 必须 先 在 data 中 增加 一 条 , 然后 通知 RecyclerView 刷新 内 容 , 于 是 RecyclerView 
就 重新 调用 Adapter 的 方法 ， 重 新 创建 子 控件 并 显示 。 

但 首先 我 们 得 有 触发 这 个 功能 的 机 制 ， 那 区 增加 一 个 菜单 项 吧 ， 当 用 户 选 择 此 沫 单项 时 ， 
在 最 后 增加 一 条 音乐 信息 。 那 还 是 先 增 加 沫 单项 吧 。 一 说 到 增加 菜单 项 ,可 能 你 首先 想到 的 是 
找到 Activity 的 某 单 资 源 文 件 ,在 其 中 增加 新 的 菜单 项 。 这 当然 这 无 问题 ， 但 是 其 实 Fragment 
也 可 以 有 目 己 的 菜单 资源 ,创建 自己 的 菜单 。 但 是 ，Fragment 的 菜单 却 不 会 奉 换 Activity H 
单 ， 而 是 当 显 示 这 个 Fragment 时 ，Fragment 的 菜单 追加 到 Activity 的 菜单 中 。 

Fragment 类 中 也 有 onCreateOptionsMenu0 和 onOptionsItemSelected0 方 法 ， 其 代码 的 作用 
与 Activity 中 相同 。 我 们 需要 再 添加 一 个 菜单 资源 ， 如 图 12.4.1.1 所 示 。 


Ld 
File name: music list menu IE 
Resource type: | Menu M 
Root element: 
Source set: main 图 
Directory name: | menu 
Available qualifiers: Chosen qualifiers: 
ET 
€» Network Code : Not sho 
Ə Locale | -— | 
= Layout Direction 
ER c... lect 一 一 em Midi 


12.4.1.1 


癌 菜 单 中 添加 一 个 Item， 并 设置 其 id 和 标题 ， 如 图 12.4.1.2 所 示 。 


i00 


item 

id 

title 

icon 
showAsAction 
visible 
enabled 
checkable 


图 12.4.1.2 


add one music info 
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实现 onCreateOptionsMenu()， 加 载 此 菜单 : 


QOverride 
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { 


inflater.inflate(R.menu.music list menu, menu); 
/ / Tas S UB ACHSE 
super.onCreateOptionsMenu (menu,inflater); 


实现 onOptionsItemSelected(), ua MZ JESE 8&.: 


QOverride 
public boolean onOptionsItemSelected (MenuItem item)|í 
// BIAVIK Fragment PPJ sed I ULTE 
int id = item.getItemId(); 
if(id == R.id.add one music info)í( 
ALLIES" RE p 
MusicInfo musicInfo = new MusicInfo ("新 歌手 ", "一 首 新 歌 ", 1); 
data.add (musicInfo); 
// fI Adapter 如 彻 RecyclerView, AMIRAIRE 
musicListView.getAdapter ().notifyDataSetChanged(); 
return true; //ŻE true rH RKA INRA 
} 


return super.onOptionsItemSelected (item); 


设置 此 属性 ， 才 能 显示 菜单 : thissetHasOptionsMenu(tre); ， 这 一 句 必 须 放 在 
onCreateOptionsMenu0O 之 前 ， 我 们 就 放 在 Fragemnt 的 构造 方法 中 吧 ， 如 图 12.4.1.3 所 示 。 


public MusicListFragment() { 
data.add(new MusicInfo(" Sz; zx" ," EEBERAE/N518" ,4)); 
data.add(new MusicInfo(" 贝 克 汗 脚 ", "我 是 真 的 还 想 再 借 五 百 元 " ,2)); 
data.add(new MusicInfo("Zk9sE jh" ," —ÁT FA Ej" ,2));} 
data.add(new MusicInfo(" 牛 德 华 ", "一 个 爱 上 浪 召 的 人 ",2)); 
data.add(new MusicInfo(" 王 钢 烈 "," 菊 花 残 ",5)); 
data.add(new MusicInfo(" 罗 金 凤 "," 一 天 到 晚 游泳 的 驴 " ,4)); 


— L 
dt AN 


// d SABiX—f8y, Fragment £53.48 


this.setHasoptionsMenu(true); 


图 12.4.1.3 


TR, IJ! 运行 App， 点 “登录 ”进入 音乐 列表 页 面 ， 点 菜单 ， 看 到 了 吗 ? 如 图 12.4.1.4 
所 示 。 选 中 它 ， 是 不 是 在 最 后 多 了 一 项 ? 如 图 12.4.1.5 Bran. 
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12.4.1.4 图 12.4.1.5 
12.4.2 ”其 他 操作 
e 增加 多 条 
与 增加 一 条 一 样 ， 先 在 List 中 增加 多 条 数据 ， 然 后 通知 RecyclerView 刷新 。 
e 插入 


与 增加 一 条 一 样 ， 先 在 List 中 插入 数据 ， 然 后 通知 RecyclerView 刷新 。 
@ 删除 
与 增加 一 条 一 样 ， 先 在 List 中 删除 数据 ， 然 后 通知 RecyclerView 刷新 。 


12.5 局 部 刷新 


前 面 对 列 表 的 改变 ， 看 起 来 非常 容易 。 但 是 ， 其 实 这 样 做 效率 不 高 。 因 为 我 们 不 论 改 变 的 
是 一 条 还 是 多 条 ， 都 让 RecyclerView 刷新 了 全 部 数据 。 为 什么 这 样 说 呢 ， 你 是 否 注意 了 这 一 
t f Vid: 

翻译 方法 的 名 字 就 是 “通知 数据 集 改变 了 ”， 数 据 集 指 的 是 所 有 的 数据 。Adapter 还 提供 
了 更 多 的 通知 方法 ， 能 适应 各 种 情况 ， 如 图 12.5.1 所 示 。 
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musicListView. ee notif 
return true;//:*/strue; 


5» > notifyDataSetChanged() 
: Ð ù notifyItemChanged(int position) 
is super- ONE GOTT E ù notifylItemChanged(int position, Obje.. 


m a notifylteminserted(int position) 


fm a notifyltemMoved(int fromPosition, in.. 

e *» èa notifyItemRangeChanged(int positions.. 
oid DRCEORUERPIESDICNEN E è notifyItemRangeChanged(int positions.. 
2 E Zu E 3E pá f$» è notifyItemRangeInserted(int position.. 
ater.inflate(R.menu.mu: f» èa notifyltemRangeRemoved(int positions.. 


历 企 妆 所 方法 Üm a notifyltemRemoved(int position) 


M —» 3. 
一 F 8 RE 


图 12.5.1 


这 么 多 通知 方式 ! 看 名 字 基 本 就 能 猜 出 其 作用 ， 如 通知 条 目 改变 (Changed) 、 条 目 插入 
(CImserted)、 条 目 移 动 位 置 (Moved) 。 方 法 名 中 包含 “Item ”的 只 影响 一 条 , 包含 “ItemRanged” 
的 影响 多 条 ， 但 它们 必须 是 相 临 的 。 

我 们 把 前 面 增加 一 个 item 的 代码 做 一 下 修改 ， 改 为 在 data 的 第 1 条 的 后 面 插 入 新 的 音乐 
言 息 ， 首 先 还 是 操作 data， 然 后 再 通知 RecyclerView。 代 码 如 下 : 


QOverride 
public boolean onOptionsItemSelected (MenuItem item)|í 
// I| Fragment 'FÉJe AIRI TE 
int id = item.getItemId(); 
if(id == R.id.add one music info){ 
MALEZE 27 /! ad UÀ 
MusicInfo musicInfo = new MusicInfo ("新 歌手 ", "一 首 新 歌 ", 1) ; 


data.add(l1,musicInfo); 

// HH Adapter w44] RecyclerView, AMR AUGA HI SE 
musicListView.getAdapter().notifyItemInserted(1); 
return true; //JX/J7/true WIL BEI IMA J 


) 


return super.onOptionsItemSelected (item); 


注意 上 和 面 代 码 中 间 data 中 添加 数据 的 语句 和 通知 RecyclerView 的 语句 ， 尤 其 是 参数 中 条 
目的 序号 ， 都 是 1， 这 里 必须 一 致 。 
其 余 操 作 的 通知 请 自行 实验 。 


“A 。 运行 效率 优化 


虽然 现在 RecyclerView 看 起 来 运行 正常 ， 但 是 其 隐 含 着 重大 的 问题 : 运行 效率 不 佳 ! 如 
果 代 码 运行 效率 低 ， 就 会 造成 CPU 耗 电 严 重 ， 缩 短 设备 使 用 时 间 ， 并 且 设 备 发 热 明 显 ， 因 此 
会 增加 地 球 的 资源 损耗 ， 提 高 大 气温 度 ， 造 成 全 球 变 暖 ， 生物 灭绝 ， 这 是 一 个 有 正义 感 的 程序 
员 绝 对 无 法 容忍 的 ! 所 以 我 们 要 优化 代码 ! 

要 优化 代码 , 首先 得 找 出 哪里 效率 低 。 最 简单 的 思路 , 就 是 我 们 应 注意 那些 耗 时 的 方法 们 ， 
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尽量 减少 它们 的 执行 次 数 。 你 找到 它们 了 吗 ” 其 实 就 是 fndViewById0。 控 件 有 父子 关系 ， 在 
内 存 中 是 一 棵 树 ， 根 据 ID 查找 一 个 节点 的 话 ， 需 要 遍历 控件 树 ， 这 个 运算 是 非常 慢 的 ， 所 以 
要 注意 findViewById0 的 调用 。 经 仔细 研究 ， 发 现 它 真 的 有 问题 ， 注 意 观 察 MyAdpter 的 
onBindViewHolder0 方 法 ， 其 中 就 有 findViewById0 的 调用 ， 而 onBindViewHolderO 是 会 被 多 
次 调用 的 ， 每 次 一 个 Item 显示 之 前 ， 都 会 调用 一 次 onBindViewHolder0， 这 包括 在 Item 7& 1H 
屏幕 再 滚 回来 时 ， 所 以 onBindViewHolder0 是 可 能 被 频繁 调用 的 。findViewById0 的 调用 仅仅 
是 为 了 获取 控件 ， 如 果 我 们 能 把 获取 到 的 控件 保存 下 来 , 在 onBindViewHolderO 中 直接 使 用 是 
不 是 就 OK 了 ? 那 如 何 保存 呢 ? 保存 在 哪里 呢 ? 此 时 ，ViewHoler 就 派 上 用 场 了 ， 它 就 是 专门 
用 于 hold View 的 。 

首先 修改 ViewHoler 类 ， 为 它 添加 三 个 字段 ， 用 于 保存 三 个 控件 ， 然 后 再 于 构造 方法 中 取 
得 控件 并 保存 在 相应 的 字段 中 ， 其 代码 变 为 这 样 : 

private class MyViewHolder extends RecyclerView.ViewHolderí 
TextView viewSinger ; 


TextView viewTitle; 
RatingBar ratingBar; 


public MyViewHolder (View itemView) { 


super (itemView); 

viewSinger- (TextView) itemView.findViewById(R.id.textViewSinger); 
viewTitle-(TextView) itemView.findViewById(R.id.textViewTitle); 
ratingBar- (RatingBar) itemView.findViewById(R.id.ratingBar); 


现在 ， 只 要 创建 ViewHolder 对 象 ， 就 完成 了 查找 变 保存 下 这 三 个 控件 的 动作 ， 然 后 在 
onBindViewHolder() 中 使 用 它们 即 可 ， 代 码 如 下 : 


QOverride 

public void onBindViewHolder (MyViewHolder holder, int position) { 
// Sci —fr*I v fg List 项 
MusicInfo musicInfo = data.get (position); 


/ I EAE DE BEI BTE 

holder.viewSinger.setText (musicInfo.getSinger()); 
holder.viewTitle.setText (musicInfo.getTitle()); 
holder.ratingBar.setRating (musicInfo.getLike()); 


响应 item 选择 


我 们 在 使 用 各 种 App 时 ， 经 常会 有 这 种 操作 : 点 击 选择 一 条 ， 进 入 新 的 页 面 显 这 条 的 详 
细 信 息 。 要 实现 这 样 的 功能 ， 必 须 啊 应 一 条 的 点 击 事件 。 一 说 到 啊 应 事件 ， 盲 先 你 应 该 想到 侦 
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听 器 。RecyclerView 中 有 没有 叫 作 类 似 “setOnItemClickListenerO0” 的 方法 呢 ? RDE, RA, 
那 怎 么 办 呢 ? 天 无 绝 人 之 路 ， 我 们 可 以 为 一 条 Item 的 根 控件 设置 事件 侦 听 。 但 是 ， 在 哪里 写 
设置 代码 呢 ? 必须 在 能 取得 条 目 控件 的 地 方 , 而 且 最 好 是 在 它 刚 被 创建 出 来 时 , 这样 在 点 击 它 
时 ， 它 才能 啊 应 。 那 最 合适 的 位 置 就 是 Adaper 的 回调 方法 onCreateViewHoler0。 以 下 是 代码 
实现 ， 如 图 12.7.1 所 示 。 


UVerrLQe 


public myviewHolder oncreateviewHolder(ViewGroup parent, int viewType) { 
LayoutInflater inflater - getLayoutInflater(null); 
View view - inflater.inflate(R.layout.music List item,parent,false); 
VFiFTTÉTHRViewTWw E ESTE ARAR E DEDE 
view.setonclickListener(new View.OnClickListener() { 
(9jOverride 


} 


MyViewHolder viewHolder = new MyviewHolder(view); 
return viewHolder; 


} 
12.7.1 


现在 运行 的 话 ， 点 一 条 ， 出 现 提 示 ， 如 图 12.7.2 所 示 。 


图 12.7.2 


但 是 ， 这 太 Low 了 ， 我 们 还 应 该 取出 所 选 Item 的 信息 。 取 得 所 选 Item 的 信息 就 是 根据 
RecyclerView 中 的 Item 找到 对 应 的 data 中 Item， 只 要 取得 RecyclerView 中 Item 的 序号 即 可 。 
取得 其 序号 , 必须 借助 ViewHolder. 所 以 我 们 应 该 把 设置 侦 听 器 的 代码 移 到 ViewHolder 类 中 ， 
就 容易 使 用 ViewHolder 对 象 了 。 这 段 代 码 放 到 ViewHolder 的 构造 方法 中 即 可 ， 代 码 如 下 : 


public MyViewHolder (View itemView) { 
super (itemView); 


viewSinger-(TextView) itemView.findViewById(R.id.textViewSinger); 
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viewTitle-(TextView) itemView.findViewById(R.id.textViewTitle); 
ratingBar- (RatingBar) itemView.findViewById(R.id.ratingBar); 


/ /'ALÍTIB TR View PIAA i AREFE fr Hg AR 
itemView.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
/ / RATHER dEZNHDK 
int position - getAdapterPosition(); 
MusicInfo musicInfo - data.get(position); 


Snackbar.make(v, "你 选 了 第 "+position+" 行 , 歌 名 是 : 
"+musicInfo.getTitle(), 
Snackbar . LENGTH _ LONG) .show() ; 
} 
}); 


在 这 段 代 码 中 ， 我 们 调用 了 ViewHolder 的 方法 getAdapterPosition0 获 取 到 当前 Item 对 应 
的 适配器 中 数据 的 位 置 ， 也 就 是 data 中 Item 的 位 置 ， 这 里 是 关键 。 如 图 12.7.3 所 示 。 


12.7.3 


1 2 .号 ”显示 不 同类 型 的 行 


我 们 经 常会 在 一 些 App 中 看 到 列表 形式 显示 的 内 容 ， 但 是 各 行 之 间 的 layout 并 不 相同 ， 
比如 图 12.8.1 所 示例 子 。 
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# 国 是 车 训 #{ 尔 有 好 这 次 
集训 成 果 吗 ? 了 
话题 14 万 阅读 150 讨 论 


中 国 游客 泰国 机 场 拒 付 小 费 被 打 进 展 : 
官员 因 涉 嫌 贪 污 被 调查 


lec 3 
所 | 


央视 正式 曝光 篆 20 名 字 ， 将 采用 五 人 
机 组 ， 远 程 飞 行 需要 两 班 倒 ? 


| è 
" tå ex 
um zs > 
rr J 5 AM 


图 12.8.1 


要 实现 这 样 的 效果 ， 肯 定 需 要 准备 多 个 Item layout 资源 ， 而 且 后 台 存 储 数据 的 List 的 各 
item. 也 不 是 同一 个 类 的 实例 ， 因 为 不 同 的 行 显示 的 可 能 不 是 同一 种 类 型 的 数据 。 我 们 需要 根 
据 List 的 Item 的 类 型 显示 不 同 的 Layout， 同 时 绑 定 不 同 的 控件 。 下 面 让 我 们 一 步 步 实现 这 个 
效果 。 


12.8.1 添加 新 Item 数据 类 


首先 我 们 添加 一 个 类 , 保存 Item 的 数据 , 区 别 于 MusicInfo. 这 个 类 叫 Advertising (广告 )， 
它 是 我 们 在 音乐 列表 中 插入 的 广告 , 它 只 有 两 个 字段 , 一 是 广告 商 , 二 是 广告 内 容 , 源码 如 下 : 


// EHUR FBA) É 

public class Advertising { 
private String advertiser; /// FÈ 
private String content; /// ENR 


public Advertising(String advertiser, String content) { 
this.advertiser - advertiser; 
this.content - content; 


) 


public String getAdvertiser() { 
return advertiser; 


) 


public void setAdvertiser(String advertiser) { 
this.advertiser - advertiser; 


) 


public String getContent() { 
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return content; 


) 


public void setContent(String content) { 
this.content - content; 


) 


我 们 创建 一 个 广告 类 实例 ， 揪 入 到 后 台数 据 “data” 中 ， 但 在 此 之 前 ， 需 要 把 data 的 类 型 
改 一 下 ， 因 为 它 里 面 存 的 数据 不 仅 是 MusicInfo 一 种 了 ， 还 要 有 Advertising， 需 要 将 其 范 型 参 
数 改 为 两 个 类 共同 的 父 类 ， 只 能 是 Object 了 : private List<Object> data = new ArrayList<>0;， 
下 面 再 添加 Advertising 对 象 就 没 问题 了 : 


data.add(new MusicInfo(" 马 云云 "," 踩 蘑菇 的 小 姑娘 "， 4) ) ; 

data.add(new MusicInfo ("贝克 汗 脚 ", "我 是 真 的 还 想 再 借 五 百 元 ",2) ) ; 
data.add(new MusicInfo (" 杰 克 孙 ", "一 行 白 鉴 上 西天 " ,2) ) ; 

// SA —X/ 各 

data.add(new Advertising(" 蓝 翔 "," 中 国航 天 人 才 的 摇 蓝 指定 生产 厂家 ") ) ; 
data.add (new MusicInfo (" 牛 德 华 ", "一 个 爱 上 浪 旭 的 人 " ,2) ) ; // AE. "IB RRE 
data.add(new MusicInfo (" 王 钢 烈 "," 菊 花 残 ",5) ) ; 

data.add(new MusicInfo (" 罗 金 凤 "," 一 天 到 晚 游泳 的 驴 " ,4) ) ; 


数据 准备 好 了 ， 下 一 步 添 加 广告 item 对 应 的 layout 资源 。 


12.8.2 添加 Item Layout 
添加 layout 资源 的 过 程 不 再 叫 叫 了 ， 如 图 12.8.2.1 所 示 。 


(5 New Resource File 

Eile name: music list advertising item 

Root element: LinearLayout 

Source set: | main 

Directory name: layout 

Available qualifiers: Chosen qualifiers: 
43 Country Code >> | 


@ Network Code Nothing to show 
(9 Locale 


ED [9k] | Cance! | 


12.8.1 


layout 很 简单 ， 就 是 两 个 TextView， 预 览 如 图 12.8.22 所 示 。 


AndFirstStep 


12.822 
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其 源码 如 下 : 


<?xml version-"1.0" encoding="utf-8" ?> 

«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:orientation-"horizontal"» 


«TextView 
android:id-"Q-c*id/textViewAdvertiser" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 


android:layout marginRight-"l0dp" 
android:text-"/| fj" 
android:textSize-"18sp" /» 


«TextView 
android:id-"Q-cid/textViewContent" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout weight-"1" 
android:text-"WZi" /> 

«/LinearLayout» 


下 一 步 干什么 呢 ? 下 一 步 还 不 能 修改 Adapter 的 代码 ， 而 是 需要 创建 新 的 ViewHolder 25. 


12.8.3 创建 新 的 ViewHolder 类 


ViewHolder 是 为 了 减少 fndViewById0 的 调用 ， 不 同 的 item layout， 其 包含 的 子 控件 也 不 
相同 ， 所 以 每 一 个 item layout 都 要 对 应 一 个 ViewHolder 类 ， 而 且 为 了 容易 扩展 ， 一 般 会 创建 
一 个 作为 基 类 的 抽 像 ViewHoder 类 ， 其 余 ViewHolder 类 都 从 它 派生 ， 我 们 也 这 样 做 吧 ， 先 创 
建 基 类 ， 依 然 作 为 MusicListFragment 的 内 部 类 吧 : 

private abstract class BaseViewHolder extends RecyclerView.ViewHolder[( 


public BaseViewHolder (View itemView) { 
super (itemView); 


可 以 看 到 , 现在 也 没有 什么 实质 性 的 内 容 。 下面 修改 原先 的 ViewHolder 类 MyViewHolder 
(注意 加 粗 的 地 方 ) : 


private class MyViewHolder extends BaseViewHolder( 
TextView viewSinger ; 
TextView viewTitle; 
RatingBar ratingBar; 


public MyViewHolder (View itemView) { 
super (itemView); 
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viewSinger-(TextView) itemView.findViewById(R.id.textViewSinger); 
viewTitle-(TextView) itemView.findViewById(R.id.textViewTitle); 
ratingBar- (RatingBar) itemView.findViewById(R.id.ratingBar); 


// VIL ÍT UT View WM ex dr SITEAXSCHBAE TE — f TH AUR 
itemView.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
/ / Hl SEBÜÍTBUELE, MrR 


int position - getAdapterPosition(); 
MusicInfo musicInfo = (MusicInfo)data.get (position); 
Snackbar.make(v, "你 选 了 第 "+position+" 行 , 歌 名 是 ; 
"+musicInfo.getTitle(), 
Snackbar . LENGTH LONG).show(); 
} 


再 创建 Advertising Item 对 应 的 ViewHolder 类 AdvertisingViewHolder: 


private class AdvertisingViewHolder extends BaseViewHolderí( 
1ER] BIHETYX 
TextView textViewAdvertiser; 
/ FL BR) EFIE 
TextView textViewContent; 


public AdvertisingViewHolder (View itemView) { 


super (itemView); 
textViewAdvertiser = itemView.findViewById(R.id.textViewAdvertiser); 
textViewContent = itemView.findViewById (R.id.textViewContent); 


MyAdapter 类 中 用 到 MyViewHolder 的 地 方 都 要 改 为 BaseViewHolder， 比 如 MyAdapter 
定义 时 所 传 入 的 范 型 参数 ， 改 为 这 样 : private class MyAdapter extends 
RecyclerView.Adapter<BaseViewHolder> ,  onCreateViewHolder() 的 定义 改 为 public 
BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType)，onBindViewHolder0 的 
定义 改 为 public void onBindViewHolder(BaseViewHolder holder, int position)。 

下 一 步 改 写 Adapter 的 代码 ， 根 据 data 中 Item 的 类 型 ， 显 示 不 同 的 layout 以 及 绑 定 不 同 
的 控件 。 


12.8.4 ”区 分 不 同 的 View Type 


RecyclerView 中 使 用 View Type 区 分 不 同 的 Item 的 layout， 前 面 的 例子 中 只 有 一 种 item 
layout， 所 以 不 需要 区 分 。 

onCreateViewHolder() 的 第 二 个 参数 就 是 要 创建 的 Item. 的 View Type， 我 们 需要 在 
onCreateViewHolder() 中 判断 它 的 值 ,根据 不 同 的 值 使 用 对 应 的 item layout 资源 创建 Item View. 
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但 是 , 它 的 值 是 什么 呢 ? 它 的 值 是 由 我 们 目 己 决定 的 ,我 们 需要 Override 另 一 个 方法 , 在 其 中 
决定 各 Item 对 应 的 View Type 的 值 ， 这 个 方法 是 getItemViewType0， 它 的 实现 如 下 : 


QGOverride 
public int getItemViewType(int position) { 
// IKÍEZS E position, XXlfefrx[vf viewType HE, 212E 
// KfIERUSÍrlayout WI ID KA ViewType HI 
if (data.get (position) instanceof MusicInfo){ 
// ZRII MusicInfo 


return R.layout.music list item; 
Jjelse(í 
// AXIS ES Advertising 
return R.layout.music list advertising item; 


在 onCreateViewHolder0 中 根据 不 同 的 View Type 加 载 不 同 的 layout: 


QOverride 
public BaseViewHolder onCreateViewHolder (ViewGroup parent, int viewType) { 
LayoutInflater inflater - getLayoutInflater (null); 
//viewType tÆ layout /fj id 
View view-inflater.inflate(viewType, parent, false); 
BaseViewHolder viewHolder; 
if(viewType--R.layout.music list item) [| 
viewHolder - new MyViewHolder(view); 
Jjelse(í 
viewHolder - new AdvertisingViewHolder (view); 
} 


return viewHolder; 


代码 中 判断 viewType 的 值 ， 创 建 了 不 同 的 ViewHolder 类 。 下 一 步 修 改 
onBindViewHolder0， 判 断 每 条 数据 的 类 型 ， 进 行 不 同 的 绑 定 。 代 码 如 下 : 


QOverride 
public void onBindViewHolder(BaseViewHolder viewHolder, int position) { 
// Xl fr» Ww List 项 
Object item = data.get (position); 
if(item instanceof MusicInfo) { 
// RRT I8 BE INT TE TE IP 


MusicInfo musicInfo - (MusicInfo) item; 


MyViewHolder vh = (MyViewHolder) viewHolder; 
vh.viewSinger.setText (musicInfo.getSinger ()); 
vh.viewTitle.setText (musicInfo.getTitle()); 
vh.ratingBar.setRating(musicInfo.getLike()); 

Jjelse(í 
Advertising advertising- (Advertising) item; 
AdvertisingViewHolder vh- (AdvertisingViewHolder) viewHolder; 


vh.textViewAdvertiser.setText (advertising.getAdvertiser()); 
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vh.textViewContent.setText (advertising.getContent ()); 


运行 App， 进 入 主页 面 ， 是 否 看 到 这 样 的 效果 ?如 图 12.8.4.1 所 示 。 


蓝 翔 中 国航 天 人 才 的 摇 蓝 指定 生产 厂家 


12.8.4.1 


到 此 为 止 , RecyclerView 的 主要 玩法 介绍 完了 。 后 面 会 大 量 使 用 它 , 也 会 展示 更 多 的 玩法 。 
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我 们 的 App 最 终 要 实现 聊天 功能 。 现 在 我 们 已 掌握 了 构建 复杂 界面 的 技术 ， 那 么 我 们 先 
把 QQ 界面 模仿 出 来 ， 然 后 再 增加 实质 的 聊天 功能 吧 。 

整体 来 说 ，QQApp 的 大 多 数 页 面 在 顶部 都 具有 Action Bar， 然 而 ， 实 际 上 那 并 不 是 一 个 
真 的 ActionBar， 而 是 用 View 模拟 出 来 的 。 


创建 新 的 Androld 项 目 


新 建 一 个 Android 工程 ， 名 字 叫 QQApp， 文 持 的 最 低 版 本 你 随便 ， 我 选 的 4.4， 在 添加 

Activity 的 那 一 步 ,我 选择 J“Empty Activity”, 在 下 一 步 中 一 定 要 选择 “Backwords Compatibility 

(向 后 兼容 ， 即 兼容 低 版 本 ) ”， 我 保留 了 Acitivty 的 名 字 为 MainActivity (这 是 App 中 添加 
的 第 一 个 Activity) 。 


设计 登录 页 面 
首先 注意 ， 各 页 面 都 是 Fragment! 


13.2.1 创建 登录 Fragment 
下 面 先 创建 登录 Fragment， 如 图 13.2.1.1 所 示 。 


! AIDL 
ı Activity 
! Android Auto 


?' Folder 


Fragment ||! Fragment (Blank) 


P Google r L Fragment (List) 


| Other Là Fragment (with a +1 button) 
B: Service » L4, Modal Bottom Sheet 
! UI Component + 
9 Wear } 
B Widget , 
$?' XML + 
«4 Resource Bundle 
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创建 一 个 空 的 Fragment， 取 名 LoginFraement， 同 时 要 创建 layout 文件 ， 如 图 13.2.1.2 所 示 。 


Creates a blank fragment that is compatible back to API level 4. 


Fragment Name: | LoginFragment 


Create layout XML? 


Fragment Layout Name: | fragment login 
DJ Include fragment factory methods? 
C] include interface callbacks? 


Target Source Set: | main 


图 13.2.12 


下 面 把 LoginFragment 显示 在 MainActivity 中 。 由 于 MainActivity 的 layout 文件 中 , 根 View 
默认 是 ConstraintLayout， 而 作为 Fragment 容器 的 Layout 用 FragmentLayout 比较 好 ， 上 所 以 将 
ConstraintLayout 改 为 FragmentLayout, activity main.xml 内 容 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«FrameLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:id="@+id/fragment container" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-"niuedu.com.qqapp.MainActivity"» 

«/FrameLayout» 


TE Activity 启动 时 就 将 Fragment 加 入 到 Activity 中 (MainActivity 类 中 ) : 


QOverride 

protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 


//14$ LoginFragment WMA, EJA H 

FragmentManager fragmentManager = getSupportFragmentManager(); 

FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 

LoginFragment fragment - new LoginFragment(); 

fragmentTransaction.add(R.id.fragment container, fragment); 

fragmentTransaction.commit(); 


我 们 还 要 将 Activity 的 ActionBar EH, Zz $8] 77 13:26 I2 Activity 的 theme, 7E Manifest 
文件 中 可 以 看 到 Activity 的 theme, WF: 


«application 
android:allowBackup-"true" 


android:icon-"8mipmap/ic launcher" 
android:label-"G8string/app name" 
android:roundIcon-"8mipmap/ic launcher round" 
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android:supportsRtl-"true" 


android:theme-"8style/AppTheme"» 
«activity android:name-".MainActivity"» 
«intent-filter» 
«action android:name-"android.intent.action.MAIN" /» 
«category android:name-"android.intent.category.LAUNCHER" /» 
«/intent-filter» 
«/activity» 


«/application» 


但 Activity 并 没有 设置 theme 属性 ， 它 便 使 用 了 Application 的 theme 设置 : 
android:theme="@style/AppTheme'"。 在 res/values/styles.xml 文件 中 定义 了 AppTheme 这 个 style， 
内 容 是 这 样 的 : 


«!-—- Base application theme. --> 

«style name-"AppTheme" parent-'"Theme.AppCompat.Light.DarkActionBar"-» 
«!-- Customize your theme here. --> 
<item name-"colorPrimary"»8color/colorPrimary«c/item» 
<item name-"colorPrimaryDark"»8color/colorPrimaryDarkc/item-» 
<item name-"colorAccent"»color/colorAccent«/item» 

«/style» 


我 们 将 style TRKI "parent" JBIEREK "* Theme.AppCompat.Light.NoActionBar" , 
Activity 就 没有 Action Bar 了 。 


13.2.2. iT SRI 


QQApp 的 登录 页 面 CLoginFragment) 是 图 13.2.2.1 所 示 的 这 个 样子 。 也 可 能 你 看 此 文 时 ， 
QQ 又 变样 了 ， 我 只 能 模仿 当前 的 样子 。 


BaQ 


ERTE ie 


TERSEMUCRISE IOS 


图 13.2.2.1 
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将 


e 此 页 面 是 一 个 Fragment. 
e 使 用 ConstraintLayonut。 
e 背 承 是 一 张 图 片 。 
e 所 有 控件 都 是 半 透 明 的 。 
详细 制作 步骤 : 
CD 找 一 张 背 景 图 片 ( 最 好 是 PNG) ， 放 在 res/drawable F. 
(2) 制作 左上 角 企 鹅 图 片 (最 好 是 PNG) ， 我 是 在 这 个 地 址 搜 到 并 下 载 的 : 
http-//www.easyicon.net . 
(3) HEA QQ 号 输入 框 ， 加 layout 约束 。 
(4) 在 QQ 号 输入 框 的 右边 放置 一 个 TextView， 设 置 其 text 为 特殊 字符 “V”， 设 置 其 
layout 约束 。 
(5) 拖 入 密码 输入 框 ， 设 置 其 约束 。 
(6) 拖 入 按钮 ， 设 置 其 text 为 “登录 ”， 设 置 背 景色 为 淡 蓝 ， 设 置 其 约束 。 
CI) 拖 入 两 个 TextView， 设 置 其 text 为 瑟 记 密码 和 新 用 户 登 录 ， 设 置 其 约束 。 
(8) 在 最 下 面 拖 入 一 个 横 回 的 LinearLayout， 加 入 两 个 TextView, 分 别 设置 其 text 为 “ 登 
录 即 代表 阅读 并 同意 ”和 “服务 条 球 ”， 设 置 其 Layout， 设 置 第 二 个 TextView 的 颜色 为 淡 赣 
色 。 
(9) 除了 最 上 面 的 QQ 图 标 和 文字 ， 下 面 所 有 的 控件 都 要 设置 为 并 透明 ， 即 alpha 属性 
为 0.7。 
难点 : 
主要 是 QQ 号 输 入 框 看 起 来 比较 花哨 ， 因 其 右边 有 个 下 拉 箭 头 ， 当 点 这 个 箭头 时 ， 会 弹出 
以 前 登录 过 的 QQ 号 和 头像 。 看 起 来 似乎 区 头 是 这 个 输入 框 的 一 部 分 ， 其 实 不 是 ， 它 是 另外 一 
个 控件 ， 只 是 把 它 放 到 了 输入 框 里 面 。 我 们 需要 啊 应 这 个 盘 头 的 点 击 事件 , 在 其 中 弹出 类 似 于 
菜单 的 控件 ， 并 在 其 中 列 出 登录 过 的 QQ 号 和 头像 。 


13.2.3 UI 代码 
下 面 是 LoginFragment 的 界面 设计 源码 ， 其 layout 资源 是 fragment layout.xml， 内 容 为 : 


«android.support.constraint.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 

xmlns:tools-"http://schemas.android.com/tools" 


android:layout width-"match parent" 


android:layout height-"match parent" 
android:background-"8drawable/bgl" 
tools:context-"niuedu.com.qqapp.LoginFragment"» 


«ImageView 
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android:id="@+id/imageView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"20dp" 
android:layout marginTop-"40dp" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintTop toTopOf-"parent" 
app:srcCompat-"Qdrawable/qq" 
android:layout marginStart-"20dp" /» 
«TextView 
android:id-"Q-cid/textView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"8dp" 
android:fontFamily-"casual" 
android:text-"Qo" 
android:textColor-"Qandroid:color/white" 
android:textSize-"36sp" 
android:textStyle-"bold" 
app:layout constraintBottom toBottomOf-"(-id/imageView" 
app:layout constraintLeft toRightOf-"G8-c-id/imageView" 
app:layout constraintTop toTopOf-"G8-id/imageView" 
android:layout marginStart-"8dp" /» 
«EditText 
android:id-2"Q-id/editTextQQNum" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginLeft-"32dp" 
android:layout marginRight-"32dp" 
android:layout marginTop-"40dp" 
android:alpha-"0.8" 
android:ems-"10" 
android:hint-"QOQ 号 /手机 号 /邮箱 " 
android:inputType-"textPersonName" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomOf-"G8-id/imageView" 
app:layout constraintHorizontal bias-"0.0" 
android:layout marginStart-"32dp" 
android:layout marginEnd-"32dp" /» 
«EditText 
android:id-"Qc*id/editTextPassword" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginTop-"lldp" 
android:alpha-"0.8" 
android:ems-"10" 
android:hint-" Z;fij" 
android:inputType-"textPassword" 
app:layout constraintHorizontal bias-"1.0" 
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app:layout constraintLeft toLeftOf-"6-id/editTextQOQNum" 

app:layout constraintRight toRightOf-"8-id/editTextQONum" 

app:layout constraintTop toBottomOf-"8-id/editTextQONum" /> 
«Button 

android:id-"8-cid/buttonLogin" 

android:layout width-"Odp" 

android:layout height-"wrap content" 

android:layout marginTop-"15dp" 

android:alpha-"0.7" 

android:background-"8android:color/holo blue light" 

android:text-" Ek" 

app:layout constraintHorizontal bias-"0.0" 

app:layout constraintLeft toLeftOf-"(-id/editTextQONum" 

app:layout constraintRight toRightOf-"(-id/editTextQQNum" 

app:layout constraintTop toBottomOf-"G8-c-id/editTextPassword" /> 
«TextView 

android:id-"Q-cid/textViewHistory" 

android:layout width-"wrap content" 

android:layout height-"wrap content" 

android:layout marginBottom-"8dp" 

android:layout marginRight-"8dp" 

android:text-" V" 

app:layout constraintBottom toBottomOf-"8 -id/editTextQQONum" 

app:layout constraintRight toRightOf-"8-id/editTextQONum" 

app:layout constraintTop toTopOf-"G8-cid/editTextQONum" 

android:layout marginEnd-"8dp" /» 
«TextView 

android:id-"*id/textViewForget" 

android:layout width-"wrap content" 

android:layout height-"wrap content" 

android:layout marginTop-"lódp" 

android:text-" iui?" 

android:textColor-"8android:color/holo blue dark" 

app:layout constraintLeft toLeftOf-"8(-*-id/buttonLogin" 

app:layout constraintTop toBottomOf-"G8-id/buttonLogin" /> 
«TextView 

android:id-"Qcid/textViewRegister" 

android:layout width-"wrap content" 

android:layout height-"wrap content" 

android:layout marginTop-"ló6dp" 

android:text=" 新 用 户 注册 " 

android:textColor="@android:color/holo blue dark" 

app:layout constraintRight toRightOf-"(6-id/buttonLogin" 

app:layout constraintTop toBottomOf-"G8-id/buttonLogin" /> 
«LinearLayout 

android:layout width-"wrap content" 

android:layout height-"wrap content" 

app:layout constraintBottom toBottomOf-"parent" 

android:layout marginBottom-"24dp" 

android:layout marginRight-"8dp" 
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app:layout constraintRight toRightOf-"parent" 
android:layout marginLeft-"8dp" 
app:layout constraintLeft toLeftOf-"parent"» 
«TextView 
android:id="@+id/textView4" 
android:layout width-"match parent" 


android:layout height-"wrap content" 


android:text=" 登 录 即 代表 阅读 并 同意 " /> 


«TextView 
android:id-"Q-crid/textView5" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:text-"flRóT2K SX " 
android:textColor-"8android:color/holo blue light"/» 
«/LinearLayout» 


«/android.support.constraint.ConstraintLayout» 


现在 运行 的 话 ，App 应 该 是 这 样子 的 ， 如 图 13.2.3.1 所 示 。 


13.2.31 


13.2.4 显示 登录 历史 


要 完成 这 个 功能 ， 需 要 使 用 本 地 存储 ， 记 录 下 每 次 登录 成 功 的 QQ 号 ， 然 后 在 需要 显示 时 
根据 历史 记录 创建 沫 单项 ,但 本 地 存储 这 部 分 知识 现在 还 没 讲 ,所 以 我 就 显示 固定 的 几 条 历史 。 

但 是 ， 要 完全 模仿 QQApp 这 里 的 效 打 不 是 那么 简单 ， 因 为 在 弹出 历史 记录 菜单 时 ， 这 个 
菜单 盖 住 了 从 它 开始 的 位 置 一 直到 屏幕 最 底部 的 所 有 空间 。 就 是 说 从 密码 输入 框 开始 下 面 所 有 
的 控件 都 看 不 到 了 ， 而 同时 这 个 菜单 还 是 半 透 明 的 ， 效 果 如 图 13.2.4.1 所 示 。 
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APEM 


图 13.2.4.1 


要 实现 此 效果 ,需要 把 QQ 与 输入 框 下 的 部 分 内 容 单独 拿 出 来 , 即 两 图 中 红 框 标 出 的 部 分 。 
要 为 这 块 区 域 准 备 两 个 子 页 面 ， 这 两 个 子 页 面 互 相 替 换 ， 即 显示 一 个 时 ， 另 一 个 隐藏 。 根 据 各 
子 页 面 中 控件 的 排版 特点 ， 第 一 个 子 页 面 的 根 View 应 为 ConstraintLayout, 第 二 个 子 页 面 的 根 
View 为 纵 回 的 LinearLayout。 默 认 显 示 第 一 个 子 页 面 。 这 两 个 子 页 面 还 得 有 一 个 容器 ， 这 个 
容器 当然 应 占据 整个 子 页 面 的 位 置 ， 容 纳 子 页 面 ， 最 适合 做 这 个 容器 的 控件 是 FrameLayout， 
所 以 我 们 需要 改进 fragment layout.xml 的 内 容 ， 改 成 这 样 : 


«android.support.constraint.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 

xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:background-"8drawable/bgl" 
tools:context-"niuedu.com.qqapp.LoginFragment"» 


«ImageView 
android:id-"Q8-cid/imageView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"20dp" 
android:layout marginTop-"40dp" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintTop toTopOf-"parent" 
app:srcCompat-"8drawable/qq" 


android:layout marginStart-"20dp" /> 
«TextView 

android:id-"Q-c-id/textView" 

android:layout width-"wrap content" 

android:layout height-"wrap content" 

android:layout marginLeft-"8dp" 
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android:fontFamily-"casual" 
android:text-"Qo" 
android:textColor-"android:color/white" 
android:textSize-"36sp" 
android:textStyle-"bold" 
app:layout constraintBottom toBottomOf-"(-id/imageView" 
app:layout constraintLeft toRightOf-"G8-c-id/imageView" 
app:layout constraintTop toTopOf-"Q-id/imageView" 
android:layout marginStart-"8dp" /» 
«EditText 
android:id-"Qcid/editTextQQNum" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginEnd-"32dp" 
android:layout marginLeft-"32dp" 
android:layout marginRight-"32dp" 
android:layout marginStart-"32dp" 
android:layout marginTop-"40dp" 
android:alpha-"0.8" 
android:ems-"10" 
android:hint-"QQ 号 /手机 号 /邮箱 " 
android:inputType-"textPersonName" 
app:layout constraintHorizontal bias-"0.0" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomOf-"G8-c-id/imageView" /> 
«TextView 
android:id-"(*id/textViewHistory" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginRight-"l6dp" 
android:layout marginTop-"12dp" 
android:padding-"5dp" 
android:text-"V" 
app:layout constraintRight toRightOf-"(-id/editTextQONum" 
app:layout constraintTop toTopOf-"G8-c-id/editTextQONum" /> 
«FrameLayout 
android:layout width-"Odp" 
android:layout height-"Odp" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintHorizontal bias-"0.0" 
app:layout constraintLeft toLeftOf-"8(c-id/editTextQONum" 
app:layout constraintRight toRightOf-"(-id/editTextQONum" 
app:layout constraintTop toBottomOf-"G-cid/editTextQOQNum" 
app:layout constraintVertical bias-"0.0"» 
«LinearLayout 
android:id-"Q8-cid/layoutHistory" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:orientation-"vertical" 
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android:visibility-"invisible"»«/LinearLayout» 


«android.support.constraint.ConstraintLayout 
android:id-"Q-c-id/layoutContext" 
android:layout width-"match parent" 
android:layout height-"match parent"» 
«EditText 
android:id-"8c-id/editTextPassword" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:alpha-"0.8" 
android:ems-"10" 
android:hint-" %49" 
android:inputType-"textPassword" 
app:layout constraintHorizontal bias-"0.0" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 
«Button 
android:id-"Q8-cid/buttonLogin" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginTop-"13dp" 
android:alpha-"0.7" 


android:background-"Q8android:color/holo blue light" 


android:text-" A3" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 


app:layout constraintTop toBottomOf-"Q8-cid/editTextPassword" /> 


«TextView 
android:id-"Qc*id/textViewForget" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginTop-"ló6dp" 
android:text-" Tiu hj?" 


android:textColor-"8android:color/holo blue dark" 
app:layout constraintLeft toLeftOf-"8(c-id/buttonLogin" 
app:layout constraintTop toBottomOf-"G8-c*id/buttonLogin" /> 


«TextView 
android:id-"Qcid/textViewRegister" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginTop-"l6dp" 
android:text=" 新 用 户 注册 " 


android:textColor="@android:color/holo blue dark" 
app:layout constraintRight toRightOf-"Q-*id/buttonLogin" 
app:layout constraintTop toBottomOf-"8-*id/buttonLogin" /> 


«LinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
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android:layout marginBottom-"24dp" 
android:layout marginEnd-"8dp" 
android:layout marginLeft-"8dp" 
android:layout marginRight-"8dp" 
android:layout marginStart-"8dp" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent"» 
«TextView 
android:id="@+id/textView4" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:text=" 登 录 即 代表 阅读 并 同意 "” /> 
<TextView 
android:id="@+id/textView5" 
android:layout_width="match parent" 
android:layout height-"wrap content" 
android:text=" 服 务 条 款 " 
android:textColor-"8android:color/holo blue light" /> 
«/LinearLayout» 
«/android.support.constraint.ConstraintLayout» 
«/FrameLayout» 
«/android.support.constraint.ConstraintLayout» 


注意 , 现在 在 QQ 号 输入 框 下 面 是 FrameLayout. 它 有 两 个 儿子 , 一 个 是 id 为 layoutHistory 
的 LinearLayout， 另 一 个 是 id 为 layoutContext 的 ConstraintLayout， 它 们 就 是 两 个 子 页 面 。 注 
意 layoutHistory 的 visibility 是 invisible， 即 不 可 见 ， 这 样 就 造成 初始 时 只 显示 layoutContext 
的 内 容 。 当 用 户 点 击 登 录 框 右边 的 下 拉 箭 头 〈 即 textViewHistory) 时 ， 隐 藏 layoutContext， 显 
示 layoutHistory。 我 们 用 layoutHistory 作为 历史 沫 单项 的 容器 ， 沫 单项 应 该 是 动态 创建 的 ， 我 
们 应 该 为 每 个 菜单 项 搞 一 个 单独 的 layout 资源 文件 ， 从 它 创 建 出 菜单 项 控件 ， 加 入 到 
layoutHistory 中 。 那 为 什么 不 使 用 真正 的 菜单 Menu) 呢 ? 原 因 很 简单 ， 因 为 用 Menu 搞 不 出 
来 〈 至 少 我 摘 不 出 来 ) 。 下 一 节 就 设计 历史 沫 单项 。 


13.2.5 ”设计 历史 菜单 项 


增加 一 个 layout 资源 ， 文 件 名 叫 “]ogin history item.xml”。 其 根 View 是 一 个 横向 的 
LinearLayout， 左 边 是 一 个 TextView 显示 QQ 号 ,右边 是 一 个 删除 图 标 ， 其 左边 紧 靠 它 的 是 一 
个 QQ 头像 图 片 ， 代 人 码 如 下 : 

<?xml version-"1.0" encoding-"utf-8"?» 
«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 


xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 


android:layout width-"match parent" 
android:layout height-"4ldp" 


android:gravity-"center vertical" 
app:cardElevation-"0dp"» 
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«TextView 
android:id="@+id/textView2" 
android:layout_width="0dp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
android:text-"6788877665555" /» 

«ImageView 
android:id="@+id/imageView2" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
app:srcCompat-"?android:attr/textSelectHandle" /» 

«TextView 
android:id-"Qcid/textViewDelete" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"l0dp" 
android:layout marginRight-"8dp" 
android:text-"X" /» 

«/LinearLayout» 


13.26 ”实现 显示 历史 的 代码 


Ww. QQ 与 输入 框 右 边 的 下 拉 般 头 的 点 击 事件 ， 在 LoginFragment 的 onCreateView()77 iX 
中 ， 找 到 控件 textViewHistory 并 且 为 它 设置 侦 听 器 : 


QOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
// Inflate the layout for this fragment 
View v = inflater.inflate(R.layout.fragment login, container, false); 


// Wy Reip pe dr, SÉHIEXSIDORGE 
v.findViewById (R.id.textViewHistory).setOnClickListener (new 
View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
} 
} ) 


return v; 


在 onClick0 方 法 中 ， 我 们 要 创建 菜单 项 ， 加 入 到 layoutHistory 控件 中 ， 然 后 显示 
layoutHistory 控件 并 且 隐 藏 layoutContext 控件 .所 以 首先 我 们 要 取得 两 页 面 的 layout 控件 才能 
操作 它们 。 为 了 方便 使 用 ， 我 们 在 LoginFragment 中 增加 两 个 字段 (就 是 成 员 变 量 ) : 


public class LoginFragment extends Fragment { 
private ConstraintLayout layoutContext; // ERRI. -—fconstraintLayout 


private LinearLayout layoutHistory; //// U3XÉWZ, &-—fLinearLayout 
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在 onCreateViewO 中 取得 它们 ， 在 onClickO 中 使 用 它们 : 


QGOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
// Inflate the layout for this fragment 
View v = inflater.inflate(R.layout.fragment login, container, false); 


layoutContext - v.findViewById(R.id.layoutContext); 
layoutHistory - v.findViewById(R.id.layoutHistory); 


/ / IA Re B v Lr T, PEHI ORI DOR AB 
v.findViewById(R.id.textViewHistory).setOnClickListener (new 
View.OnClickListener() { 
QGOverride 
public void onClick(View view) { 
layoutContext.setVisibility (View.INVISIBLE); 
layoutHistory.setVisibility (View.VISIBLE); 
// &l& 3 KØ LERRA, RMB layoutHistory F 
View layoutItem = getActivity().getLayoutInflater().inflate( 
R.layout.login history item,null); 
layoutHistory.addView (layoutlItem); 
layoutItem = getActivity().getLayoutInflater().inflate( 
R.layout.login history item,null); 
layoutHistory.addView(layoutItem); 
layoutItem = getActivity().getLayoutInflater().inflate( 
R.layout.login history item,null); 
layoutHistory.addView(layoutItem); 
} 
} ) 


return v; 


运行 一 下 ， 点 几 下 那个 下 拉 图 标 ， 效 果 是 不 是 如 图 13.2.6.1 所 示 这 样 ? KFK, fH 
效果 不 对 呀 ! 效果 应 该 是 图 13.2.6.2 所 示 这 样 的 。 


13.2.6.1 图 13.2.6.2 
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那 就 继续 改进 。 怎 么 改 呢 ?我 们 需要 为 业 单 之 间 男 出 分 割 线 ， 我 们 还 要 保证 菜单 项 们 的 高 
度 与 QQ 号 输入 框 的 高 度 一 样 , 我 们 还 需要 保证 QQ 号 输入 框 的 下 边界 线 与 沫 单项 的 分 割 线 样 
子 完 全 一 样 。 这 么 多 要 求 如 何 满足 呢 ” 定 制 菜 单项 根 控件 的 背景 ! 但 是 ， 在 定制 背景 之 前 ,我 
们 需要 先 学 习 一 种 新 的 Drawable 资源 : selector， 它 是 专门 用 于 设置 控件 背景 的 。 


13.2.7 selector 资源 


不 要 被 它 的 名 字 所 迷惑 ， 记 住 它 是 一 种 Drawable。 但 它 为 什么 叫 selector W? 其 中 带 有 选 
择 的 意味 。 因 为 Android 的 控件 可 以 有 多 种 状态 : enable. disable. focus 等 ， 如 何在 视 党 上 体 
现 出 这 些 状态 呢 ? 使 用 不 同 的 背景 是 个 好 办 法 。 你 应 该 已 经 注意 到 了 ,为 控件 设置 背景 必须 用 
drawable 对 象 , 可 以 是 图 片 , 也 可 以 是 颜色 。 用 图 片 作 背景 可 以 搞 出 各 种 效果 , 这 肯定 没 问 题 ， 
但 是 制作 这 些 状 态 图 片 很 费劲 啊 , 而 且 控 件 是 可 大 可 小 的 ,图 片 跟着 缩放 后 可 能 效果 就 不 好 了 。 
于 是 Android 为 我 们 提供 了 叫 作 selector 的 drawable， 专 门 作 背景 ， 来 解决 上 面 的 问题 。 

我 们 创建 一 个 drawable 资源 ， 作 为 QQ 号 输入 框 背 景 的 selector 定义 文件 ， 如 图 13.2.7.1 
所 示 。 


File name: edit bk selector 11 
Resource type: | Drawable M 
Root element: selector | 
Source set: | main M 
Directory name: | drawable | 
Available qualifiers: Chosen qualifiers: 

$3 Country Code — 

©: Network Code ; Nothing to show 

$9 Locale | 


= Layout Direction 
EA Cmallact Corann Mdh 


E38 Cancel | Help 


1327.1 


注意 “Root element” 这 一 条 的 值 需 为 selector。 文 件 内 容 如 下 : 


<?xml version-"1.0" encoding="utf-8"?> 
«selector xmlns:android-"http://schemas.android.com/apk/res/android"» 
«item android:state focused-"true" 


android:drawable-"8drawable/edit bk normal" /> 

«item android:state focused-"false" 
android:drawable-"8drawable/edit bk normal" /> 
«/selector» 


它 包 含 了 两 个 item， 每 个 item 有 两 个 属性 “state focused” 和 “drawable”， 第 一 个 属性 
表示 对 应 的 状态 ， 第 二 个 属性 表示 此 状态 下 使 用 的 Drawable。 这 两 个 item 指定 了 控件 在 有 焦 
点 和 无 焦点 时 使 用 的 drawable， 由 于 我 们 的 控件 在 有 焦点 和 无 焦点 时 没 差 别 ， 所 以 都 使 用 了 同 
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一 个 Drawable “edit bk mormal”。 这 个 drawable 并 不 是 一 个 图 片 文件 ， 而 是 一 个 叫 作 
“layer_list” 的 drawable 资源 。layer_list 又 是 什么 呢 ? 肯定 是 用 它 提 供 了 背景 图 像 ， 那 它 是 枢 
片 吗 ? 
13.2.8 layer list 资源 

我 们 先 创建 这 个 layer list 资源 ， 如 图 12.2.8.1 所 示 。 


File name: | edit bk normal M | 11 
Resource type: | Drawable M 


Root element | layer-list | 
Source set: | main M 图 


Directory name: | drawable | 


Available qualifiers: Chosen qualifiers: 
© Network Code | 
© Locale << 
IZ Layout Direction | 


KR c mallact Ferann Mdictkha 


Nothing to show 


"o or 


图 12.2.8.1 


然后 把 源码 改 成 这 样 : 


<?xml version-"1.0" encoding-"utf-8"?» 
«layer-list xmlns:android-"http://schemas.android.com/apk/res/android" 
«item android:top-"40dp"» 
«shape android:shape-"line" > 
«stroke 
android:width-"lpx" 
android:color-"£FF000000" /> 
«padding 
android:bottom-"1l10dp" 
android:left-"2dp" 
android:right-"2dp" 
android:top-"1l0dp" /> 
«/shape» 
«/item» 
«/layer-list» 


从 字面 上 来 理解 ，layer list 是 层 列 表 的 意思 ， 其 可 以 包含 多 个 <item>， 一 个 item 就 是 一 
层 。 每 一 层 是 一 个 图 像 ， 各 层 图 像 按 顺序 上 下 摆 放 ， 上 面 履 盖 下 面 ， 重 登 组 合 出 最 终 效果 。 但 
我 们 看 到 <item> 中 并 没有 引用 图 像 ， 而 是 定义 了 <shape>，shape 是 一 个 形状 ， 实 际 上 它 定 义 了 
一 幅 图 。 但 这 种 图 叫 作 矢 量 图 ,与 图 像 文 件 中 的 图 不 一 样 ( 图 像 文 件 这 样 的 图 叫 栅 格 图 ) X 
量 图 里 存 的 是 如 何 画 出 一 副 图 的 代码 , 而 不 是 图 中 每 个 像素 的 颜色 , 显示 矢量 图 其 实 就 是 执行 
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代码 把 图 画 出 来 , 这 样 带 来 的 好 处 是 缩放 时 不 失真 , 坏处 是 不 能 表现 太 复 杂 的 图 像 (不 是 不 能 ， 
ERF, 显示 的 时 候 也 很 慢 )， 一 般 只 显示 比较 简单 的 线条 、 形 状 或 它们 的 组 合 。 我 们 的 输 
入 框 只 需要 在 底部 显示 一 直线 ， 这 就 很 适合 用 矢量 图 。 

这 个 <shape> 中 包含 了 两 个 元 素 <stroke> 和 <padding>，stroke 定义 了 一 条 线 ， 说 明了 其 宽 
和 颜色 ， 而 padding 决定 了 这 个 线条 的 人 位置。 默认 情况 下 ， 线 画 出 来 后 位 于 控件 纵 回 的 中 央 ， 
我 通过 在 padding 中 设置 top 和 bottom 的 值 把 它 移 到 了 控件 的 底部 。 


13.2.9 ”定制 控件 背景 
drawable 们 定义 好 了 ， 把 它们 用 作 探 件 的 背景 吧 。 首 先 设置 成 QQ 号 输入 框 的 背景 : 


其 实 历史 菜单 项 也 应 该 使 用 这 个 背景 ， 使 用 了 这 个 背景 之 后 可 以 保证 这 些 菜 单项 变 得 与 
QQ 与 输入 框 高 度 一 臻 并且 有 相同 的 分 割 线 ， 如 图 13.2.9.1 所 示 。 


© fragment login.xml x | &login history item.xml x 

Palette Q &- !- [E Bil Properties 

Al — — | Ab TextView 四 区 addstatesFromChildren [= 
alpha 
alwaysDrawnWithCache [~ 
animateLayoutChanges [=) 


£É-oF- animationCache E 


Component Tree 一 一 
Ex LinearLayout (horizonta MD 
^b textView2 - 5/5557 
网 imageView2 
^b textViewDelete - `X 


backgroundTint 
backgroundTintMode 
baselineAligned 
baselineAlignedChildind 
clickable 

clipChildren 


13.231 


运行 App， 看 看 效果 吧 ， 如 图 13.2.9.2 所 示 。 


图 13.2.9.2 


245 


Android 9 编程 通俗 演义 


13.2.10 ”动画 显示 菜单 


QQApp 中 显示 历史 沫 单 时 是 有 动画 的 ， 我 们 也 不 能 少 。 虽 然 Android 推荐 使 用 属性 动画 ， 
但 是 属性 动画 满足 不 了 我 们 的 需求 ， 所 以 创建 一 个 View 动 男 ， 如 图 13.2.10.1 所 示 。 


f New Resource Fil 
. File name: login history anim Fi 
| Resource type: Animation E | 


Root element: set 


Source set: main B 


| Directory name: anim 


| Ayailable qualifiers: Chosen qualifiers: 
$3 Country Code 

| : > > 

E Network Code iin 

| (9 Locale " | 


|. & Layout Direction 
| EA collect Coronan Miidth 


Nothing to show 


13.2.10.1 
源码 如 下 : 


<?xml version-"1.0" encoding-"utfí-8"?» 
«set xmlns:android-"http://schemas.android.com/apk/res/android"» 
«alpha 
android:fromAlpha-"0.0" 
android:toAlpha-"1.0" 
android:duration-"100" /» 
«scale 
android:fromXScale-"0.5" 
android:toXScale-"1.0" 
android:fromYScale-"0.5" 
android:toYScale-"1.0" 
android:pivotX-"502" 
android:pivotY-"0$" 
android:duration-"100" 
android:fillBefore-"false" /» 
«/set» 


android:pivotX="50%" 表 示 在 模 向 上 的 缩放 是 出 中 心 位 置 开 始 的 ，android:pivotY="0%" 表 
示 在 纵向 上 的 缩放 是 从 顶部 开始 的 。 


使 用 动画 : 在 啊 应 下 拉 箭 头 的 点 击 事件 中 ， 回 layoutHistory 中 添加 历史 菜单 项 之 后 ， 为 
layoutHistory 显示 过 程 设 置 动 画 。 


public void onClick(View view) { 


layoutContext.setVisibility (View.INVISIBLE); 
layoutHistory.setVisibility(View.VISIBLE); 
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/ / EI £& PHZK I p XE, ZEUS/layoutHistory F 

View layoutItem- getActivity().getLayoutInflater().inflate( 
R.layout.login history item,null); 

layoutHistory.addView(layoutItem); 

layoutItem- 
getActivity().getLayoutInflater().inflate(R.layout.login history item,null); 

layoutHistory.addView(layoutItem); 

layoutItem- 
getActivity().getLayoutInflater().inflate(R.layout.login history item,null); 

layoutHistory.addView(layoutItem); 


/ / RAER SP OK 

AnimationSet set = (AnimationSet) AnimationUtils.loadAnimation( 
getContext(), R.anim.login history anim); 

layoutHistory.startAnimation(set); 


运行 App， 是 不 是 登录 历史 的 显示 时 有 动画 了 ? 


13.2.11 让 菜单 消失 


当 点 击 菜单 项 之 外 的 区 域 ， 都 应 该 让 菜单 消失 , 即 隐藏 layoutHistory， 显 示 layoutContext。 
这 如 何 实现 呢 ? 我 的 意思 是 简单 的 实现 , 因为 如 果 你 不 怕 有 麻烦 的 话 , 可 以 为 所 有 可 能 点 击 到 的 
控件 设置 点 击 啊 应 侦 听 器 ,在 其 中 切换 两 个 控件 。 但 不 用 这 么 麻烦 也 可 以 做 到 ,实际 上 你 只 要 
为 最 外 层 的 控件 设置 侦 听 锅 即 可 。 最 外 层 的 控件 是 谁 呢 ”当然 是 Fragment 的 根 View f, 参看 
下 面 代码 : 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
/f Infigggetfe Layout for this fragment 
View v“ inflater.inflate(R.layout.fragment Login, container, false); 
T1735 E ELIT A: 
/ / ir rS LZ AN DCHORT, TE] ERE RR 


v.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
if(layoutHistory.getVisibility()--View.VISIBLE)|( 


layoutContext.setVisibility (View.VISIBLE); 
layoutHistory.setVisibility (View.INVISIBLE); 


在 其 中 先 判 断 当前 是 否 显 示 了 历史 菜单 ， 如 果 是 ， 就 切换 两 个 页 面 。 这 段 代 码 应 放 在 
LoginFragment 的 界面 初始 化 方法 中 : 


public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
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// Inflate the layout for this fragment 
View v — inflater.inflate(R.layout.fragment login, container, false); 
layoutContext v.findViewById(R.id.layoutContext); 
layoutHistory v.findViewById (R.id. layoutHistory); 
// MIA Ri BET dr E, MER SIDE 
v.findViewById(R.id.textViewHistory).setOnClickListener (new 
View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
layoutContext.setVisibility (View.INVISIBLE); 
layoutHistory.setVisibility (View.VISIBLE); 


// EVE 3 2E SIR EA, AMP layoutHistory 'F 
for(int i-0;i«33;i-4-4) { 
View layoutItem = getActivity().getLayoutInflater().inflate( 
R.layout.login history item, null); 
layoutHistory.addView(layoutItem); 


/ / ADRA SE OR 
AnimationSet set = (AnimationSet) AnimationUtils.loadAnimation( 
getContext(), R.anim.login history anim); 
layoutHistory.startAnimation(set); 
} 
)); 
/ LE HP BLZ PI DCBORI, E SEE ES RC 
v.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
if(layoutHistory.getVisibility()--View.VISIBLE)( 
layoutContext.setVisibility (View.VISIBLE); 
layoutHistory.setVisibility(View.INVISIBLE); 


} ) 7 


return v; 


需要 注意 的 是 创建 菜单 项 的 地 方 ， 我 改 成 了 用 for 循环 来 创建 三 个 菜单 项 
但 是 ， 还 有 问题 ， 现 在 在 沫 单项 上 点 击 时 也 会 隐藏 历史 菜单 ， 这 不 对 头 ， 我 们 应 该 六 把 菜单 
项 中 的 QQ 号 取出 来 设置 到 输入 框 中 ， 如 何 处 理 呢 ?下 节 分 解 。 


13.2.12” 啊 应 选中 菜单 项 


我 们 需 啊 应 菜单 项 的 点 击 , 在 啊 应 方法 中 把 QQ 号 取出 并 设置 到 输入 框 中 。 把 侦 听 器 设置 
到 菜单 项 的 根 View 中 ， 代 码 如 下 : 
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QOverride 
public void onClick(View view) { 
editTextQONum.setText("123384328943894893"); 


layoutContext.setVisibility(View.VISIBLE); 
layoutHistory.setVisibility(View.INVISIBLE); 


注意 本 应 把 菜单 项 中 的 QQ 号 取出 来 再 设置 到 输入 框 中 , 但 是 我 没有 , 我 只 是 随便 设置 了 
一 堆 数 字 进 去 ， 因 为 我 们 是 做 原型 嘛 ， 实 际 的 功能 后 面 再 做 。 
editTextQQNum 是 QQ 号 输入 框 ， 我 们 把 它 创建 为 LoginFragment 的 成 员 变量 : 


public class LoginFragment extends Fragment { 


private ConstraintLayout layoutContext;// ^ 7/925 9075, Æ— Ce 
private LinearLayout layoutHis*Óry;///^ ^35 27. Æ—fLinear 


private EditText editTextQQNum;//00 F#M HE 


并 在 界面 初始 化 时 取得 它 : 


ater, ViewGroup container, 
Bundle savedInstanceState) { 
// Inflate the Layout for this fragment 
View v = inflater.inflate(R.layout.fragment login, container, false) 


layoutContext = v.findViewByIG(R.id.LayoutContext); 
layoutHistory vfinttewyiiq tutte pr 


editTextQQNum = v.findViewByIG(R.id.editrTextQQNum); 


下 面 是 onCreateViewO 的 全 部 代码 : 


public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
// Inflate the layout for this fragment 
View v = inflater.inflate(R.layout.fragment login, container, false); 
layoutContext - v.findViewById(R.id.layoutContext); 
layoutHistory - v.findViewById(R.id.layoutHistory); 
editTextQONum = v.findViewById(R.id.editTextQQNum); 


// I FHAA A ARRI S IDOR XAR 
v.findViewById (R.id.textViewHistory).setOnClickListener (new 
View.OnClickListener() { 


QOverride 


public void onClick(View view) { 
layoutContext.setVisibility (View.INVISIBLE); 
layoutHistory.setVisibility (View.VISIBLE); 
/ / EI &E PRIZE II LORKA, RUP layoutHistory 'F 
for(int i-0;i«x3;i-44) { 
View layoutItem = getActivity().getLayoutInflater().inflate( 
R.layout.login history item, null); 
/ / WIL SE ETE dr. WERIT EIASI AMET. 
layoutItem.setOnClickListener (new View.OnClickListener() { 
QGOverride 
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public void onClick(View view) { 
editTextQQNum.setText ("123384328943894893"); 
layoutContext.setVisibility (View.VISIBLE); 
layoutHistory.setVisibility (View.INVISIBLE); 


} 
); 
layoutHistory.addView(layoutItem); 


} 
/ / QAD E ZI SERE 
AnimationSet set = (AnimationSet) AnimationUtils.loadAnimation( 
getContext(), R.anim.login history anim); 
layoutHistory.startAnimation(set); 
} 
)); 
/ / EE IPSE LZ PEE DCBORI, E SEE RES 
v.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
if (layoutHistory.getVisibility()--View.VISIBLE)( 
layoutContext.setVisibility(View.VISIBLE); 
layoutHistory.setVisibility(View.INVISIBLE); 


} 
)); 


return v; 


现在 运行 App, 可 以 发 现 历史 菜单 的 显示 与 隐藏 以 及 选中 后 的 行为 都 没 问 题 了 。 但 是 你 是 
否 注 意 到 有 个 地 方 很 有 意思 ， 我 们 只 设置 Fragment 的 根 View 的 Click 侦 听 器 时 ， 点 击 某 个 菜 
单项 ， 执 行 的 是 根 View 的 啊 应 代码 。 此 时 事件 是 菜单 项 先 收 到 的 ， 但 菜单 项 把 事件 最 终 传 给 
了 对 此 事件 有 侦 听 器 的 某 个 祖宗 ; 而 当 为 菜单 项 设置 了 Click 侦 昕 器 时 ， 点 击 菜 单项 ， 执 行 的 
就 是 菜单 项 的 侦 听 器 ， 并 且 根 View 的 侦 听 器 不 再 被 执行 ， 这 说 明了 什么 ? 说 明 只 要 设置 了 侦 
听 器 ， 此 事件 不 再 被 传递 给 父 章 。 所 以 ， 一 个 控件 的 某 个 事件 发 生 后 ， 事 件 是 可 以 被 传递 的 ， 
传递 是 有 路 由 算法 的 。 最 基本 的 规则 就 是 : 如 果 一 个 控件 未 处 理 收 到 的 事件 ， 融 回 祖 宗 传 递 ， 
直到 找到 一 个 能 处 理 此 事件 的 祖宗 ,一 旦 事件 被 某 个 控件 处 理 ， 束 不 再 传递 ; 如 果 直 到 最 后 也 
没有 找到 控件 处 理 ， 就 把 此 事件 扔 掉 。 

登录 完成 了 ， 下 面 研究 主页 面 。 


2.2 ”QQ 主页 面 设 计 


最 终 要 设计 成 如 图 13.3.1 所 示 这 个 样子 。 
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13.3.1 


先 分 析 一 下 。 首 先 说 上 面 的 导航 栏 ( 蓝 色 部 分 ), 前 面 已 经 说 过 , 它 不 是 真正 的 ActionBar。 
最 下 面 是 一 个 Tab 栏 ， 中 间 是 一 个 分 页 控件 CViewPageD 。 当 我 选择 不 同 的 Tab 项 时 ， 中 间 
的 页 面 发 生 切 换 ， 同 时 导航 栏 中 间 的 标题 和 右边 的 图 标 会 变 ， 但 看 起 来 导航 栏 本 喘 并 没有 变 。 
所 以 我 们 对 这 个 页 面 的 设计 方案 是 : 


e 上 面 一 个 横向 LinearLayout 作 叶 航 栏 。 
e 下 面 一 个 TabLayout 4 Tab 栏 。 
e 中 间 一 个 ViewPager 容纳 各 子 页 面 。 


ViewPager 是 一 种 可 以 容纳 多 个 View 的 控件 ， 但 它 与 layout 控件 不 同 ， 它 某 个 时 刻 只 能 
显示 其 中 一 个 View， 男 一 个 View 显示 时 ， 当 前 的 就 隐藏 ， 每 个 View 相当 于 一 个 页 面 ， 这 就 
是 它 名 字 的 由 来 。 它 是 非常 适合 做 我 们 主 内 容 区 的 容 占 的 ,， 并 且 它 经 常 与 TabLayout 相互 配合 
实现 Tab 翻 页 效果 。 

但 是 ,我 们 首先 要 把 这 个 页 面 对 应 的 Fragment 创建 出 来 .所 以 , 先 创建 一 个 新 的 Fragment, 
命名 为 MainFragment， 如 图 13.3.2 所 示 。 


Creates a blank fragment that is compatible back to API level 4. 


Fragment Name: | MainFragment 


Create layout XML? 


Fragment Layout Name: | fragment main 


O Indude fragment factory methods? 
(O Indude interface callbacks? 


Target Source Set: | main 


图 13.3.2 


下 面 先 把 MainFragment 的 UI 搭 起 来 。 因 整 个 页 和 面 是 上 下 结构 的 , 所 以 最 外 层 放 一 个 纵 问 
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的 LinearLayout， 上 面 放 一 个 横向 的 LinearLayout， 设 置 它 的 高 度 为 50dp， 中 间 放 一 个 
ViewPager， 下 面 放 一 个 TabLayout. TabLayout 在 哪里 呢 ? 如 图 13.3.3 所 示 ，ViewPager 的 藏身 
之 处 如 图 13.3.4 所 示 。 


Palette Q $-r Palette Q * I- 


Common |" ConstraintLayout Common == Spinner 

I-I Guideline (horizontal) Text :— RecyclerView 

i Guideline (vertical) I ScrollView 

[ITI LinearLayout (horiz... I" HorizontalScrollView 
ESLinearLayout (vertic... E NestedScrollView 


Layouts — [e]FrameLayout n 
ma CardVie 


Text 
Buttons 


Widgets 


Conta 和 iers im: 


-— Tabs 
Google $$: TableRow a 
i l-I Space E] AppBarLayàut 
"cy H] NavigationView 
Project [EJ BottomNavigationV.. 


图 13.3.3 图 13.3.4 


JE TabLayout 的 高 度 也 设 为 SAdp. X f ib ViewPager 占据 中 间 所 有 空间 并 正确 显示 
TabLayout， 需 把 ViewPager 的 layout height 置 为 04tp， 然 后 把 它 的 layout weight 置 为 1 。 预 
览 界面 看 起 来 如 图 13.3.5 所 示 。 


Fragment main.xml 源码 如 下 : 


«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:tools-"http://schemas.android.com/tools" 


android:layout width-"match parent" 
android:layout height-"match parent" 


android:orientation-"vertical" 
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tools:context-"niuedu.com.qqapp.MainFragment"» 

<! -- FM --» 

<LinearLayout 
android:layout width-"match parent" 
android:layout height-"50dp" 
android:orientation-"horizontal"» 

«/LinearLayout» 

<!-- 主 内 个 克 --> 

«android.support.v4.view.ViewPager 
android:id-"Q-cid/viewPager" 
android:layout width-"match parent" 
android:layout height-"0dp" 
android:layout weight-"1" /» 

«1—-Tab f2ff--» 


«android.support.design.widget.TabLayout 
android:layout width-"match parent" 


android:layout height-"54dgp"» 


«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Left" /» 

«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Center" /» 

«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Right" /» 

«/android.support.design.widget.TabLayout» 


«/LinearLayout» 


登录 成 功 后 才能 进入 此 页 面 ， 我 们 先 完 成 页 面 跳 转 代 码 才 能 看 到 这 个 页 面 。 在 
LoginFragment 的 onCreateViewO 中 ， 获 取 登 录 按 钮 并 为 它 设置 Click 侦 听 器 ， 代 码 改 为 如 下 : 


/ / OERI EB HI en r AIF 
View buttonLogin = v.findViewById(R.id.buttonLogin); 
buttonLogin.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
FragmentManager fragmentManager - 
getActivity().getSupportFragmentManager (); 


FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 


MainFragment fragment = new MainFragment (); 

// Ë FrameLayout PHRA fj Fragment 
fragmentTransaction.replace(R.id.fragment container, fragment); 
// EU UIA XA EABfEITP, IERI DUE AUTR EI A ZI [n] Ef UT 
fragmentTransaction.addToBackStack ("login"); 
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fragmentTransaction.commit (); 


从 预览 界面 可 以 看 到 ， BAERE, BEREDD, PYEEIBASA. FEARI 
一 修正 。 


13.3.1 设置 导航 栏 


导航 栏 左边 是 QQ 头像 ， 中 间 是 标题 ， 右 边 是 一 个 “+”。 只 需要 把 这 三 样 加 到 代表 导航 
栏 的 Layout 中 即 可 。 左 边 的 控件 是 InageView， 中 间 的 是 TextView， 右 边 也 用 一 个 TextView 
吧 。 然 后 设置 左边 的 靠 左 ， 右边 的 靠 右 ， 中 间 的 充满 剩余 空间 ,但 其 内 容 大 中 。 最 后 设置 整个 
Layout 的 内 容 纵 同居 中 。 其 余 细 节 见 源码 : 
c1-— SAL E-- 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"50dp" 
android:gravity-"center vertical" 
android:orientation-"horizontal" 
android:paddingLeft-"l6dp" 
android:paddingRight-"16dp"» 


«ImageView 
android:id-"Q*id/imageView3" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
app:srcCompat-"?android:attr/textSelectHandle" /» 


«TextView 


android:id-"Q-cid/textView3" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
android:gravity-"center horizontal" 
android:text=" 标 题 " 
android:textSize-"18sp" /> 
«TextView 
android:id-"Q-cid/textView6" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"-c" 
android:textSize-"36sp" /» 
«/LinearLayout» 


然而 ， 导 航 栏 的 背景 还 是 不 对 ，QQApp 中 的 背景 是 一 个 赣 色 的 渐变 ， 左 边 深 ， 右 边 浅 。 
如 何 实现 这 样 的 背景 呢 ? 前 面 刚 讲 了 ， 用 selector。 但 理论 上 讲 ， 只 要 是 drawable 都 可 以 作为 
背景 ， 我 们 并 不 想 让 导航 栏 在 不 同 状态 下 有 不 同 的 背景 ， 可 不 可 以 不 用 selector 这 么 复杂 的 东 
西 呢 ? 当然 可 以 ! 打 开 文 件 edit bk normal.xml, 可 以 看 到 <layer-lis 人 的 <item> 中 包含 了 <shap>， 
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shap 是 形状 的 意思 。 实 际 上 <shap> 也 可 以 作为 一 个 drawable 资源 文件 的 根 元 素 。 我 们 为 导航 
栏 创 建 作为 背景 的 drawable 资源 nav bar bk.xml， 内 容 如 下 : 


<?xml version-"1.0" encoding="utf-8" ?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 


android:shape-"rectangle"» 

«gradient android:startColor-"£FFO0O0AOFF" 
android:endColor-"4FFBOBFFF" 
android:angle-"0" /> 

«/shape» 


然后 把 它 作 为 导航 栏 的 LinearLayout 的 背景 : 


«1-- A E--» 


«LinearLayout 
android:layout widthz"match parent" 
android:layout height-"5edp" 
android:background-"Qdrawable/nav bar bk" 
android:gravity-z"center vertical" MM 
android:paddingLeft-"16dp" 
android:paddingRight-"16dp"» 


现在 的 效果 如 图 13.3.1.1 所 示 。 


图 13.3.1.1 


13.3.2 设置 Tab 栏 

Tab 栏 背景 是 白色 的 ， 可 以 认为 没有 背景 ， 但 是 它 却 有 上 边缘 ， 为 了 做 出 这 个 效果 ， 还 是 
要 设置 背景 的 ， 并 且 背 景 必须 用 矢量 图 Drawable。Tab 的 每 个 Item 都 有 图 像 ， 我 们 需要 找到 
这 三 张 图 加 到 项 目 中 。 

消息 图 标 如 图 13.3.2.1 所 示 。 
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*1 drawable 
lè) bgt.png 
kà edit bk normal.xml 


kà edit bk selector.xml 
[i] message focus hq 
lë] message normal.p 


kà nav bar bk.xml 
iil qq.png 


13.3.2.1 


联系 人 图 标 如 图 13.3.2.2 所 示 。 


à] contacts focus.png 
lè] contacts normal.png 


图 13.3.22 


动态 CQQ 空间 ) 图 标 如 图 13.3.2.3 所 示 。 


ü He normal.png t ve 
He spacs focus.png 


13.3.2.3 


把 图 标 设 置 上 ， 如 图 13.3.2.4 所 示 。 


Q #- 1- [B a| | Properties 
Ab TextView Blg Dp 


ox Button l 
F) ToggleButton layout width | wrap content 


layout height | wrap content 
Tabitem 
text 动态 


icon 


Component Tree "E Favorite Attributes 
* [i] LinearLayout (vertical) visibility none 
E LinearLayout (horizontal 
Fi imageview3 
Ab textView3 - 5^ 
^b textView6 ‘= 
三 | listView (RecyclerView) 
77 TabLayout 
H Tabitem 


[^j Tabitem — 
H Tabltem 


13.3.24 


效果 如 图 13.3.2.5 所 示 。 


256 


第 13 章 模仿 QQApp XT 


图 13.3.2.5 


像 导 航 栏 一 样 ， 创 建 一 个 shape drawable 可 以 吗 ? 不 可 以 ! 直接 以 shape 矢量 图 作 资 源 ， 
其 位 置 很 难 调整 正确 ， 所 以 必须 用 layer-list， 因 为 它 里 面 的 <shape> 的 位 置 可 调 ， 而 layout-list 
是 不 能 直接 作 背 景 的 ， 必 须 放 在 selector 中 ， 所 以 须 创 建 一 个 layer-list drawable 文件 
tab bar bk.xml 和 一 个 selector drawable 文件 tab bar bk selector.xml. 
tab bar bk.xml 的 内 容 为 : 
<?xml version-"1.0" encoding-"utf-8"?» 
«layer-list xmlns:android-"http://schemas.android.com/apk/res/android" » 
«item android:top-"-54dp"» 


«shape android:shape-"line" » 
«stroke 


android: 
android: 


«padding 


android: 
android: 
android: 
android: 


width-"lpx" 
color-"4FF808080" /» 


bottom-"Odp" 
left-"2gdp" 
right-"2dp" 
top-"Odp" /» 


«/shape» 
«/item» 
«/layer-list» 


tab bar bk selector.xml 的 内 容 为 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«selector xmlns:android-"http://schemas.android.com/apk/res/android"» 
«item android:state activated-"false" 

android:drawable-"8drawable/tab bar bk" /> 

«/selector» 


state activated 表示 被 激活 的 状态 ,， 融 是 被 选中 后 长 期 高 亮 的 状态 ,Tab 栏 显 然 是 不 能 处 于 
.Ed, 


Activated 状态 的 ， 所 以 其 值 为 false， 才 能 显示 android:drawable 所 引用 的 背景 。 把 
tab bar bk selector 设置 为 TabLayout 控件 的 background, 上 边界 就 出 现 了 ,如 图 13.3.2.6 所 示 。 


13.3.2.6 


251 


Android 9 编程 通俗 演义 


但 是 还 没完 ， 你 可 以 看 到 当 一 个 Item 被 选中 时 ， 图 标 和 文字 没有 变 成 赣 色 ， 而 是 下 面 出 
现 红线 。 这 个 问题 怎么 解决 昵 》” 其 实 非常 简单 了 ， 如 图 13.3.2.7 所 示 。 


TabLayout 
tabMode fixed 


tabGravity fill 
tabContentStart 


theme 


background (o drawable/tab bar bk selecto | ~- 


tabindicatorColor («Pandroid:color/transparent 


tabSelectedTextColor W| »android:color/holo blue lig | ~ 


Pa | Design.Tab 


Favorite Attributes 


visibility | none 


13.32.7 


只 需 把 tabIndicatorColor 的 值 改 为 “(@android:color/transparent” 即 可 。 它 是 Android SDK 
中 定义 的 颜色 资源 ，transparent 是 透明 的 意思 ， 透 明之 后 当然 就 看 不 到 了 。 同 时 还 设置 了 
tabSelectedTextColor 属性 ， 它 决定 在 Item 被 选中 时 文本 的 颜色 。 现 在 就 剩 下 图 片 的 颜色 在 选 
中 时 没有 变化 ， 要 实现 这 个 功能 ， 请 看 下 节 。 


13.3.3 改变 Tab Item 图 标 


我 们 可 以 在 属性 编辑 器 中 为 Tab Item 设置 图 标 ， 但 是 我 们 无 法 为 它 设 置 选中 时 的 图 标 ， 
于 是 你 可 能 这 样 想 : 响应 Tab Item 选择 change 的 事件 ， 在 Item 被 选中 时 设置 一 个 图 标 ， 在 它 
变 为 非 选中 状态 时 设置 另 一 个 图 标 。 想 法 很 好 ， 但 是 这 种 方式 不 行 ! 为 什么 呢 ? 说 来 话 长 了 。 
的 确 你 可 以 设置 Item 选择 侦 听 器 : 
tabLayout = v.findViewById(R.id.tabLayout); 
tabLayout.addOnTabSelectedListener (new TabLayout.OnTabSelectedListener() { 
QOverride 


public void onTabSelected(TabLayout.Tab tab) { 
} 


QOverride 


public void onTabUnselected(TabLayout.Tab tab) { 
) 


QGOverride 
public void onTabReselected(TabLayout.Tab tab) { 
) 


这 个 侦 听 器 接口 声明 了 三 个 方法 需要 我 们 实现 ， 从 方法 名 就 能 判断 出 其 作用 。 
onTabSelected0 在 一 个 item 被 选中 后 调用 , onTabUnselected0 在 item 从 选中 状态 变 为 非 选 中 状 


258 


第 13 章 模仿 QQApp X 


态 后 被 调用 ，onTabReselected0 在 一 个 item 被 重新 选中 时 被 调用 。 这 三 个 方法 都 有 一 个 相同 类 
型 的 参数 tab， 它 是 一 个 Tab Item， 通 过 它 可 以 获取 发 生 事件 的 item。 看 起 来 似乎 真 的 能 工作 ， 
但 是 你 把 代码 实现 之 后 发 现 工作 不 正常 。 你 一 旦 在 onTabUnselected0 中 设置 了 item 的 图 标 ， 
Tab Item 们 的 文本 状态 就 不 能 正常 显示 了 。 这 应 该 是 TabLayout 的 一 个 bug IE? 或 许 当 你 看 此 
书 时 这 个 bug 已 经 不 存在 了 。 

那么 如 何 才 能 真正 完成 此 功能 呢 ? 其 实 也 不 难 , 目 己 用 各 种 layout 控件 模拟 一 个 Tab 控件 
"I, nM 4v item 的 layout 的 点 击 事件 ， 在 其 中 想 设 置 什 么 就 设置 什么 , 但 是 我 不 想 这 样 做 ， 
我 依然 想 用 TabLayout, 因为 想 为 大 家 演示 TabLayout 的 使 用 , 尤其 是 TabLayout 5j ViewPager 
的 组 合 使 用 。 

所 以 ， 图 标 随 状态 变化 的 功能 …… 就 这 样 吧 ， 搞 不 出 来 就 不 搞 了 ， 我 无 所 谓 啊 。 


13.3.4 为 ViewPager 添加 内 容 


中 间 内 容 区 是 一 个 ViewPager， 从 它 名 字 可 以 猜 出 ， 它 是 提供 翻 页 效果 的 控件 。 它 可 以 包 
含 多 个 子 View， 一 个 子 View 就 是 一 页 ， 同 一 时 刻 只 能 显示 一 页 ， 可 以 在 页 之 间 切 换 。 它 是 
从 ViewGroup 派生 的 ， 还 记得 前 面 讲 RecyclerView 的 时 候 我 曾 说 过 ， 除 Layout 之 外 的 
ViewGroup， 要 为 它们 提供 子 控 件 ， 都 需要 用 Adapter (也 许 没 说 过 …… 但 这 并 不 重要 ) 吗 ? 
ViewPager 也 是 这 样 一 条 控件 。 

QQ 主页 面 中 三 个 Tab Item 对 应 的 页 的 内 容 都 是 列表 的 形式 ， 所 以 这 三 个 页 都 可 以 使 用 
RecyclerView 做 为 主要 内 容 控件 。 但 是 你 不 能 直接 在 界面 设计 器 中 将 这 三 个 RecylerView 拖 到 
ViewPager 中 ， 想 想 Adapter 的 使 用 思路 ， 你 是 不 是 应 该 在 Adapter 的 某 个 回调 方法 中 创建 页 
面 View? 下 面 是 Adapter 类 的 代码 : 

// 为 ViewPager IKE — fias 2s 
class ViewPageAdapter extends PagerAdapter(í 


// FÉ o 
ViewPageAdapter()í 


) 


QOverride 
public int getCount() { 
return listViews.length; 


) 


QGOverride 
public boolean isViewFromObject(View view, Object object) { 
return view == object; 


) 


// SEfilfí —f-F View, container & f View £m. BL ViewPager, 


//position & gf ue, Mo 


GOverride 
public Object instantiateItem(ViewGroup container, int position) { 
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View v = listViews[position]; 
/ / MALA AR IH 
container.addView (v); 

return v; 


) 


GOverride 
public void destroyItem(ViewGroup container, int position, Object object) { 
container.removeView ( (View)object); 


) 


解释 一 下 各 方法 。 
€  instantiateItem() 


ViewPager 在 创建 页 View 时 调用 的 方法 是 instantiateItem0,， 它 返 回 页 View 对 象 , 但 实际 
上 我 们 并 不 是 在 此 方法 中 创建 的 页 View， 而 是 在 Adapter 类 的 外 部 类 MainFragment 的 构造 方 
法 中 就 创建 了 ， 在 instantiateItem0O 中 只 是 返回 对 应 的 页 View 就 行 了 ， 这 样 做 是 为 了 避免 多 次 
创建 页 View。 注 意 其 中 container.addView0O 这 一 句 ， 你 必须 在 instantiateItem0 中 把 子 View 加 
入 到 容器 View HH. 

listViews 是 一 个 ArrayList 型 变量 ， 它 包含 了 三 个 页 View 的 实例 ， 它 是 MainFragment 的 
字段 。 

我 们 在 MainFragment 的 onCreate0 方 法 中 创建 三 个 页 View 实例 : 

public MainFragment() { 
//fl/&& —f RecyclerView, ZAA*I^voo WE. 00 RAH, oo FHA 
listViews[0]-new RecyclerView (getContext ()); 


listViews[1]-new RecyclerView (getContext ()); 
listViews[2]-new RecyclerView (getContext ()); 


// RATM TARR, ASISTE EIAS REEF AR ES 
listViews[0].setBackgroundColor (Color.RED); 
listViews[1].setBackgroundColor (Color. GREEN); 
listViews[2].setBackgroundColor (Color. BLUE); 


€  cetCount() 


返回 ViewPager 中 的 页 数 。destroyItem0 方 法 必须 实现 ， 它 用 于 在 销毁 页 View 时 调用 ， 
但 我 们 不 想 销 毁 ， 所 以 我 们 只 是 把 页 View 从 容器 中 删除 。 

€  isViewFromObject() 

此 方法 用 于 告诉 ViewPager 我 在 创建 页 View 时 有 没有 在 外 面包 装 上 什么 东西 ， 就 像 
RecyclerView 的 Adapter 中 ， 创 建 一 项 对 应 的 View 时 ， 不 是 直接 返回 View， 而 是 包 在 了 一 个 
ViewHolder 中 ， 我 们 也 可 以 在 此 处 这 样 做 ， 另 创建 一 个 类 ， 把 直 正 的 子 View 包 在 其 中 ， 那 么 
此 时 在 instantiateItem0O 中 返回 的 束 是 包装 类 的 实例 ， 于 是 在 isViewFromObject() FP 39b mi 238 [n] 
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false 了 。 我 们 对 传 入 的 参数 进行 了 比较 ， 如 果 相 同 就 返回 tue， 人 否则 返回 false， 这 是 一 般 的 
通用 做 法 。 
注意 以 下 三 名 代码， 为 三 个 页 面 设置 了 不 同 的 背景 ， 这 仅仅 用 于 测试 : 


listViews[0].setBackgroundColor (Color.RED); 


listViews[1l].setBackgroundColor (Color.GREEN); 
listViews[2].setBackgroundColor (Color.BLUE); 


创建 了 Adapter 类 ， 还 要 将 Adapter 设置 给 ViewPager: 


GOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 

View v — inflater.inflate(R.layout.fragment main, container, false); 
I/R ViewPager +ø, 44 Adapter IB E 
viewPager = v.findViewById(R.id.viewPager); 
viewPager.setAdapter (new ViewPageAdapter()); 
return v; 


代码 没什么 可 说 的 ， 变 量 viewPager 在 哪里 定义 你 应 该 知道 。〈 人 悄悄 地 告诉 你 : 定义 成 了 
MainFragment 类 的 成 员 变 量 !) 
运行 App， 登 录 ， 应 看 到 如 下 效果 (图 13.3.4.1) ， 左 右 划 动 可 翻 页 (图 13.3.4.2) 。 


No SiM £3 7 5e [3 Development Mode (slow response). Tap to close 


13.34.1 13.342 


13.3.5 ViewPager 5 TabLayout 联动 


然而 ，ViewPager 与 TabLayout 还 没有 关联 起 来 ， 所 以 现在 点 Tab Item H}, ViewPager 没 
有 翻 页 ; 同时 ViewPager 翻 页 时 ，Tab Item 也 没有 切换 。 如 何 能 让 它们 联动 呢 ? EEEH, 3 
是 啊 应 各 目的 事件 ， 在 其 中 调用 对 方 相 应 的 方法 。 比 如 啊 应 ViewPager 的 页 面 切换 事件 ， 在 其 
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中 选中 对 应 的 Tab Item; 同时 啊 应 Tab Item 的 item 选择 事件 ， 在 其 中 切换 ViewPager 中 对 应 
的 页 面 。Android 已 经 为 ViewPager 与 LayoutTab 的 联动 提供 了 部 分 内 置 逻辑 ， 我 们 可 以 做 少 
量 工 作 就 使 它 俩 在 一 起 ， 下 面 束 做 一 下 。 

首先 为 MainFragment 添加 一 个 成 员 变 量 : 


private TabLayout tabLayout; 


然后 在 MainFragment 的 onCreateViewO 中 ， 取 得 TabLayout 并 进行 设置 : 


I/R TabLayout HMH T 


ER = v.findViewById (R.id.tabLayout); 
tabLayout.setupWithViewPager (viewPager); 


这 就 OK 了 ! 运行 App 看 看 效果 吧 ， 如 图 13.3.5.1 所 示 。 


No SIM ẹ 


图 13.3.5.1 


且慢 高 兴 ! Tab Item 怎么 不 见 了 ? 但 是 用 手 在 相应 位 置 点 一 下 ， 发 现 还 有 效果 ， 能 引起 翻 

。 这 说 明 Tab Item 还 在 ， 而 且 TabLayout 与 ViewPager 已 经 正确 关联 。 但 是 ，Tab Item 上 的 
内 容 不 见 了 ， 这 是 咋 回 事 呢 ? 其 实 原 因 是 这 样 的 : 当 它 们 两 个 合体 时 ，TabLayout 就 希望 由 
ViewPager 来 决定 Tab Item 上 显示 的 内 容 ， 所 以 你 直接 设置 到 Tab Item 上 的 内 容 就 被 忽略 了 。 
由 ViewPager 决定 的 话 ， 实 际 上 是 TabLayout 调用 ViewPager 的 某 个 方法 ， 最 终 是 调用 了 
ViewPager 的 Adapter 的 方法 getPageTitle()， 所 以 我 们 要 重 写 Adapger 类 的 此 方法 ， 写 完 
代码 如 下 (ViewPageAdapter 中 ) : 

/ / XE n] fg — WE E, RB UTE, M 0 F 


GOverride 
public CharSequence getPageTitle(int position) { 


if (position--0)[( 
return "消息 "; 
}else if (position==1){ 
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return "联系 人 "; 


}else if (position==2)f{ 
return "动态 "; 


} 


return null; 


再 次 运行 App， 效 果 如 图 13.3.5.2 所 示 。Tab Item 终于 出 来 了 ! 但 是 ， 然 而 …… 为 什么 没 
有 图 像 了 ? 和 欲 知 后 事 如 何 ， 下 节 分 解 。 


图 13.3.52 


13.3.6 在 Tab ltem 中 显示 图 像 


图 像 不 能 显示 , 原因 很 简单 : ViewPager 的 Adapter 中 没有 定义 返回 每 页 图 像 的 回调 方法 。 
那么 如 何 显示 图 像 呢 ? 有 两 种 方法 。 第 一 种 很 简单 , 在 关联 ViewPager 之 后 , 获取 各 Tab Item, 
为 它们 设置 图 标 ， 代 码 如 下 : 

tabLayout.setupWithViewPager (viewPager); 


tabLayout.getTabAt(0).setIcon(R.drawable.message normal); 
tabLayout.getTabAt(1).setIcon(R.drawable.contacts normal); 


tabLayout.getTabAt (2).setIcon(R.drawable.space normal); 

简单 明了 ! 我 想 你 应 该 喜欢 这 种 方法 。 但 是 ， 还 有 一 种 方法 ， 比 较 复 杂 ， 大 多 数 人 却 都 采 
用 这 种 方法 , 所 以 我 要 为 大 家 讲 明 白 这 种 方法 , 让 大 家 可 以 装 X。 这 种 方法 要 使 用 一 种 新 东西 : 
SpannableString。 什 么 是 SpannableString? 先 看 下 面 这 行文 字 : 


#102 楼 :00 蓝 色 三 叶 草 m 


如 何 显 示 出 这 种 效果 ?你 的 想法 可 能 是 使 用 一 个 横 同 的 LinearLayout， 然 后 加 入 多 个 
TextView， 为 它们 设置 不 同 的 字体 、 颜 色 ， 最 后 还 要 来 一 个 ImageView 显示 小 图 标 。 这 样 做 
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没 问 题 ， 但 是 ， 还 有 更 牛 X 的 做 法 ， 运 行 效率 也 更 高 ， 可 以 只 用 一 个 TextView 来 显示 这 行文 
本 ! 你 只 要 使 用 SpannableString 即 可 。 从 名 字 判 断 ， 它 也 是 一 个 字符 串 类 ， 它 可 以 把 它 设置 
到 控件 的 “text” 属 性 中 。 它 与 String 类 的 区 别 是 ， 它 可 以 包含 文本 、 图 片 ， 可 以 为 文本 中 一 
段 文字 的 多 个 小 片段 设置 不 同 的 颜色 、 字 体 等 ， 这 每 一 段 叫 作 一 个 span. 

SpannableString 的 主要 使 用 方式 是 这 样 的 : 先 为 SpannableString 设置 一 段 文本 , 然后 创建 
某 种 类 型 的 Span， 然 后 把 Span 设置 给 SpannableString， 设 置 时 要 指定 这 个 Span 从 第 几 个 字 
符 作 用 到 第 几 个 字符 ， 还 要 指定 对 前 后 字符 的 影响 。 以 下 为 示例 : 


// fl — f: SpannableString HR 

SpannableString msp-new SpannableString(" 当 我 显示 出 来 后 ， 你 会 发 现 我 是 一 段 有 个 性 的 文 
F"); 

// REFE, 2 0,1 ANF HH monospace 

msp.setSpan (new 


TypefaceSpan("monospace"),0,2,Spanned.SPAN EXCLUSIVE EXCLUSIVE); 

REF, B 2,3 BANSEAEUERI 

msp.setSpan(new TypefaceSpan("serif"),2,4,Spanned.SPAN EXCLUSIVE EXCLUSIVE); 
// WBCFÍIÉXA AHE, É: INO. B 4,5 PT EPI 20 IG 

msp.setSpan(new AbsoluteSizeSpan(20),4,6,Spanned.SPAN EXCLUSIVE EXCLUSIVE); 


我 们 需要 为 Tab Item 创建 文本 与 图 像 混合 的 标题 字符 串 ， 封 装 一 个 方法 ， 代 码 如 下 : 


// 为 参数 title 中 的 字 从 第 万历 加 上 iconResId frj ARa 

public CharSequence makeTabItemTitle(String title,int iconResId) { 
Drawable image = getResources ().getDrawable (iconResId); 
image.setBounds(0, 0, 40, 40); 
//Replace blank spaces with image icon 


SpannableString sb = new SpannableString(" \n"+title); 

ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN BASELINE); 
sb.setSpan(imageSpan, 0,1, Spanned.SPAN EXCLUSIVE EXCLUSIVE); 

return sb; 


这 个 方法 有 两 个 参数 ， 一 是 文本 ， 二 是 文本 上 面 的 图 像 。 此 方法 中 首先 从 资源 创建 了 图 像 
image， 人 然后 调用 setBounds0) 方 法 设置 了 图 像 绘制 到 的 区 域 范围 。 


d 图 像 画 到 哪里 呢 ? 画 到 画布 (Cavans) 上 。 画 布 多 大 呢 ? 就 是 Span 的 大 小 ,Span 多 大 呢 ? 
| 是 由 图 像 的 Bounds 决定 的 , 这 并 不 矛盾 ,你 只 要 记 住 Span 的 左上 角 是 画布 的 (0.0) 坐 标 即 
可 ， 所 以 我 们 要 限制 图 像 宽 高 不 超过 40 像素 ， 就 设置 Bounds， 图 像 会 按 比例 缩放 之 后 画 


上 去 。 


代码 中 ， 在 创建 SpannableString 的 实例 sb 时 ， 在 字符 串 前 面 增加 了 一 个 空格 和 换行 符 。 
空格 是 图 像 span 的 占 位 符 , 后面 用 图 像 span 替换 它 。 我 们 又 创建 了 一 个 图 像 span imageSpan， 
创建 时 传 入 了 前 面 的 image 并 指定 了 它 与 左右 的 文本 如 何在 纵向 上 对 齐 , 由 于 最 终 图 像 和 文本 
处 于 不 同 的 行 ， 此 参数 并 不 起 作用 。 最 后 将 图 像 span 设置 给 sb， 注意 指定 作用 到 的 位 置 是 从 
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第 0 位 开始 的 一 个 字符 ， 正 好 指 癌 最 前 面 的 空格 ， 所 以 才能 蔡 换 空格 ， 最 后 一 个 参数 
Spanned.SPAN EXCLUSIVE EXCLUSIVE (独占 ) 表示 效果 不 影响 前 后 字符 。 

因为 要 在 ViewPageAdapter 的 方法 getPageTitle0 中 使 用 ， 所 以 我 们 就 把 这 个 方法 放 到 
ViewPageAdapter 中 吧 。getPageTitle() 稍 做 修改 ， 如 下 : 


GOverride 
public CharSequence getPageTitle(int position) { 


if (Position==0) { 

return makeTabItemTitle ("消息 "， R.drawable.message normal); 
}else if(position--1)(Íí 

return makeTabItemTitle ("联系 人 ",R.drawable.contacts normal); 
}else if(position--2)[( 

return makeTabItemTitle ("动态 ",R.drawable. space normal); 
} 


return null; 


最 后 还 要 做 一 点 工作 ， 设 置 TabLayout 的 一 个 属性 ， 不 设置 ， 图 像 显 示 不 出 来 。 属 性 名 : 
tabTextAppearance 。 它 是 Tab Item 标题 的 style， 所 以 我 们 要 先 创 建 一 个 style. TE 
res/values/styles.xml 中 增加 一 个 style: 

«style name-"TabTitleAppearance" parent-"TextAppearance.Design.Tab"» 


«item name-"textAllCaps"»false«/item» 
<item name-"android:textAllCaps"»false«/item» 


<!-- PERUENIRE, ARM—ÉNI, BHEAUZBEA! --> 
«/style» 


然后 设置 给 TabLayout， 如 图 13.3.6.1 所 示 。 


TabLayout 
tabMode 


tabGravity 


tabContentsStart 


theme 


background 2Ddrawable/tab bar bk selector 


tablndicatorColor (Pandroid:color/transparent 
tabSelectedTextColor — Bi indroid:color/holo blue light 


tabTextAppearance TabTitleAppearance 
Favorite Attrib 
visibility none 


13.3.6.1 


现在 可 以 运行 App 看 看 效果 了 。 注 意 要 把 开头 讲 的 第 一 种 做 法 的 代码 先 屏蔽 挥 啊 ， 如 图 
13.3.6.2 所 示 。 
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No SIM Œ g t D 9:57 PM 


图 13.3.6.2 


大 功 告 成 ! 
然而 QQApp 中 ， 只 能 通过 Tab Item 来 翻 页 ， 不 能 通过 划 动 翻 页 ， 所 以 我 们 应 该 禁用 
ViewPager 的 这 项 能 力 。 如 何 禁用 ， 下 节 分 解 。 


13.3.7 ”禁止 ViewPager 滑动 翻 页 


这 事 不 是 那么 简单 ，ViewPager 中 并 没有 一 个 属性 或 方法 让 你 很 容易 地 把 滑动 翻 页 功能 
掉 。 大 家 公认 的 唯一 方法 是 派生 一 个 类 ， 重 写 两 个 方法 ， 那 我 们 也 这 样 做 吧 。 
新 建 一 个 类 QQViewPager， 代 码 如 下 : 


package niuedu.com.qqapp; 


import android.content.Context; 

import android.support.v4.view.ViewPager; 
import android.util.AttributeSet; 

import android.view.MotionEvent; 


public class QOViewPager extends ViewPager( 
/ LL SEHE — ESI MEE 
public QOViewPager(Context context) { 
super (context); 


/L B SEHR AE IA. PEZ IIT I ARHVNBEL RALI 
public QOViewPager(Context context, AttributeSet attrs) 
super(context, attrs); 


QOverride 
public boolean onTouchEvent (MotionEvent event) { 
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return false; 


} 


QOverride 
public boolean onInterceptTouchEvent (MotionEvent event) { 
return false; 


} 


主要 重 写 了 方法 onTouchEventO0 和 onInterceptTouchEvent()， 其 实现 更 简单 ， 返 回 false, 
表示 此 事件 没有 被 当前 控件 处 理 ， 继 续 往 父 寿 传 。 
别 忘 了 修改 layout 文件 ， 将 ViewPager 改 为 QQViewPager (fragment main.xml) : 
«niuedu.com.dqqapp.QOQViewPager 
android:id-"Q-cid/viewPager" 


android:layout width-"match parent" 
android:layout height-"Odp" 


android:layout weight-"1" /» 


再 运行 ， 是 不 是 左右 滑动 不 能 翻 页 了 ? 


13.3.8 创建 “消息 ”页 


消息 页 面 如 图 13.3.8.1 所 示 。 


图 13.3.8.1 


先 分 析 一 下 其 结构 。 在 主 内 容 区 ， 最 上 面 是 一 个 搜索 框 ， 下 面 是 列表 的 各 行 。 实 际 上 ， 这 
个 搜索 行 也 是 列表 的 一 行 。 这 个 RecyclerView 的 大 部 分 行 的 layout 都 是 一 样 的 : 左边 一 个 图 
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像 ， 右 边 分 两 行 ， 上 面 是 标题 与 时 间 ， 下 面 是 详细 信息 ， 唯 独 顶 端 这 一 行 的 layonut 不 一 样 ， 只 
有 一 个 搜索 框 。 回 忆 一 下 RecyclerView 的 用 法 ， 应 利用 Adapter 为 它 提供 Item 的 数据 和 显示 
Item 数据 的 控件 。 我 们 需要 准备 存放 数据 的 类 和 创建 控件 的 Layout 资源 。 先 为 这 两 种 不 同 的 
行 创 建 两 个 layonut 资源 吧 。 


13.3.8.1 创建 搜索 行 layout 


首先 创建 顶端 行 的 layout。 顶 端 行 只 有 一 个 搜索 控件 。 但 是 你 不 能 使 用 Android 提供 的 搜 
索 控 件 SearchView， 因 为 SearchView 的 搜索 图 标 显 示 在 左边 ， 而 QQ 这 个 搜索 控件 的 图 标 显 
示 在 中 间 ， 并 且 劳 边 还 伴 有 文字 。 


LL LL] 


而 且 当 在 QQApp 中 点 击 这 个 图 标 时 ， 会 打开 一 个 新 的 页 面 ， 在 新 页 面 中 用 户 才 可 以 真正 
地 搜索 ， 所 以 此 处 的 搜索 控件 就 是 个 摆设 ， 我 们 可 以 用 多 个 控件 模拟 出 来 。 

我 们 为 这 一 行 创建 layout 资源 ， 文 件 名 res/layout/message list item search.xml。 其 内 容 是 
这 样 的 : 


<?xml version-"1.0" encoding="utf-8"?> 
«android.support.v/.widget.CardView 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:id-"8-cid/searchViewStub" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout marginBottom-"4dp" 
android:layout marginEnd-"8dp" 
android:layout marginStart-"8dp" 
android:layout marginTop-"4dp" 
app:cardBackgroundColor-"?attr/colorControlHighlight" 
app:cardCornerRadius-"2dp"» 


«LinearLayout 
android:layout width-"wrap content" 
android:layout height-"match parent" 
android:layout gravity-"center horizontal" 
android:gravity-"center vertical" 
android:orientation-"horizontal"» 


«ImageView 
android:layout width-"30dp" 
android:layout height-"30dp" 
android:layout weight-"1" 
app:srcCompat-"Q8android:drawable/ic search category default" 


«TextView 


android:layout width-"wrap content" 
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android:layout height-"wrap content" 
android:layout weight-"1" 
android:text-"j8 4" 


android:textSize-"18sp" /> 
«/LinearLayout» 


«/android.support.v7.widget.CardView» 


最 外 面 是 一 个 CardView， 使 用 它 的 主要 原因 是 方便 产生 圆 角 效果 。 它 里 面 要 显示 一 个 图 
像 一 个 文本 ， 所 以 使 用 了 一 个 横向 的 LinearLayout 来 包含 这 两 个 控件 ，LinearLayout 的 宽 由 内 
容 决 定 ， 并 且 它 的 layout gravity 属性 为 横 回 牛 中 ， 这 样 LinearLayout 中 的 控件 才能 看 起 来 后 
中 。 要 让 文本 在 纵向 上 居中 还 需要 设置 LinearLayonut 的 gravity 为 纵 问 居中 。 

可 以 看 到 layout gravity 与 gravity 的 区 别 , 前 者 是 设置 控件 本 号 在 其 父 控件 中 的 对 齐 方 式 ， 
后 者 设置 控件 的 儿子 们 的 对 齐 方式 。 


13.3.8.2 


创建 其 余 行 的 layout 


非 搜 索 行 的 layonut 资源 文件 为 res/layout/message list item search.xml， 内 容 是 这 样 的 : 


<?xml version-"1.0" encoding="utf-8"?> 

«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 


android: 


android 


android: 
android: 


android 


layout width-"match parent" 


:layout height-"wrap content" 
android: 


background-"8drawable/list item bk selector" 
paddingBottom-"4dp" 
paddingEnd-"8dp" 


:paddingStart-"8dp" 
android: 


paddingTop-"4dp"» 


«android.support.v/.widget.CardView 
android:layout width-"48dp" 
android:layout height-"48dp" 
app:cardCornerRadius-"25dp" 
app:cardElevation-"2dp"» 


«ImageView 
android:id-2"Q8-cid/imageView" 
android:layout width-"match parent" 
android:layout height-"match parent" 
app:srcCompat-"8drawable/message normal" 
«/android.support.v7.widget.CardView» 


«android.support.constraint.ConstraintLayout 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:layout weight-"1"» 


«TextView 
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android: 
android: 
android: 
android: 
android: 
android: 
android: 
android: 
android: 


id="@+id/textViewTitle" 
layout width-"wrap content" 
layout height-"wrap content" 
layout marginLeft-"8dp" 
layout marginStart-"8dp" 
layout marginTop-"4dp" 
text=" 标 题 " 

textSize-"18sp" 
textStyle-"bold" 


app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 


«TextView 
android: 
android: 
android: 
android: 
android: 
android: 
android: 
android: 
android: 


id-"Qcid/textViewTime" 

layout width-"wrap content" 

layout height-"wrap content" 

layout marginEnd-"8dp" 

layout marginRight-"8dp" 

layout marginTop-"8dp" 

text=" 时 间 " 
textColor-"?attr/colorControlNormal" 
textSize-"12sp" 


app:layout constraintRight toRightOf-"parent" 


app:layout constraintTop toTopOf-"parent" /» 


«TextView 
android: 
android: 
android: 
android: 
android: 
android: 
android: 


id-"Qcrid/textViewDetial" 
layout width-"Odp" 

layout height-"wrap content" 
layout marginBottom-"3dp" 
layout marginLeft-"8dp" 
layout marginStart-"8dp" 


text=" 详 细 描 述 " 


app:layout constraintBottom toBottomOf-"parent" 


app:layout constraintLeft toLeftOf-"parent" /» 


android: 
android: 
android: 
android: 
android: 


«android.support.v/.widget.CardView 


id-"Q-rid/cardViewBadge" 
layout width-"wrap content" 
layout height-"wrap content" 
layout marginBottom-"4dp" 
layout marginRight-"8dp" 


app:cardBackgroundColor-"8color/colorAccent" 
app:cardCornerRadius-"8dp" 

app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintRight toRightOf-"parent"» 


«TextView 
android:id-"(*id/textViewBadge" 
android:layout width-"wrap content" 
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android:layout height-"wrap content" 
android:layout marginEnd-"4dp" 


android:layout marginStart-"4dp" 
android:text-"0" 
android:textColor-"8android:color/white" 
android:textStyle-"bold" /» 
«/android.support.v7.widget.CardView» 
«/android.support.constraint.ConstraintLayout» 


«/LinearLayout» 


注意 各 控件 的 ID。 预 览 图 如 图 3.3.8.2. 所 示 。 


P FAU 
标题 时 间 


详细 描述 Q 


图 13.3.82.1 


整个 行 是 一 个 横 回 的 LinearLayout， 其 左边 是 一 个 CardView， 内 含 一 个 ImageView; 右边 
是 一 个 ConstraintLayout。 之 所 以 在 ImageView 外 包 一 个 CardView， 主 要 是 利用 了 CardView 
的 圆 角 效果 ， 搞 出 圆 形 ImageView。 标 题 、 时 间 、 详 细 描述、 小 徽章 都 在 ConstraintLayout 中 。 
小 徽章 是 由 CardView 和 TextView 共同 组 成 ，TextView 包 在 CardView 中 ， 使 用 CardView 的 
原因 也 是 利用 它 变 圆 的 功能 。 行 底 的 线 是 利用 selector 做 背景 搞 出 来 的 ， 这 个 selector 是 
list item bk selector.xml， 其 内 容 为 : 


<?xml version-"1.0" encoding="utf-8"?> 


«selector xmlns:android-"http://schemas.android.com/apk/res/android"» 


«item android:state activated-"false" 
android:drawable-"8drawable/list item bk" /> 
«/selector» 


list item bk.xml 的 内 容 : 


<?xml version-"1.0" encoding-"utf-8"?» 
«layer-list xmlns:android-"http://schemas.android.com/apk/res/android" » 
«item android:top-"b54dp"» 
«shape android:shape-"line" » 
«stroke 
android:width-"lpx" 
android:color-"4FFa0a0a0" /> 


«!--«solid android:color-"£FFFFFFFF" /»--» 
«padding 
android:bottom-"Odp" 
android:left-"2dp" 
android:right-"2dp" 
android:top-"Odp" /> 
«/shape» 
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«/item» 
«/layer-list» 

13.3.8.3 ”显示 消息 列表 

消息 列表 RecyclerView 对 应 的 是 listViews[0]， 让 它 显示 内 容 只 需 三 步 : 

e 为 它 创建 Adapter X; 

e 创建 Adapter 对 和 象 并 设置 给 它 ; 

e 为 它 设 置 layout 管理 器 。 

首先 为 它 创建 Adapter 类 ， 类 名 为 MessagePageListAdapter。 注 意 一 点 ， 我 们 之 前 创建 的 
Adapter 类 ， 一 般 会 作为 内 部 类 ， 但 是 这 次 由 于 三 个 RecyclerView 需要 三 个 Adapter 类 ， 都 成 
为 一 个 类 的 内 部 类 会 使 代码 太 乱 ， 所 以 我 把 这 三 个 Adapter 类 全 创建 成 了 外 部 类 ， 并 且 放 到 同 
一 个 包 下 ， 有 图 为 证 ， 如 图 13.3.8.3.1 所 示 。 


v © niuedu.com.qqapp 
v adapter 


(€ ù ContactsPagelistAdapter 
‘CH MessagePagelistAdapter 
(€ ù SpacePageListAdapter 


1334831 


MessagePageListAdapter 类 源码 如 下 : 


public class MessagePageListAdapter extends 
RecyclerView.Adapter<MessagePageListAdapter.MyViewHolder> { 


//NBT ARE 
private Activity activity; 


// ÉI& — Pp SEHE IA, WAER UW Activity FAK 
public MessagePageListAdapter (Activity activity)í 
this.activity - activity; 


QGOverride 
public MessagePageListAdapter.MyViewHolder onCreateViewHolder( 
ViewGroup parent, int viewType) { 
//AÀ layout RAMIT View 
LayoutInflater inflater - activity.getLayoutInflater(); 
View view-null; 
if (viewType == R.layout.message list item search) ( 
view — inflater.inflate(R.layout.message list item search, 
parent, false); 
Jjelse( 
view — inflater.inflate(R.layout.message list item normal, 
parent, false); 
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MyViewHolder viewHolder=new MyViewHolder (view); 
return viewHolder; 


) 


GOverride 

public void onBindViewHolder( 
MessagePageListAdapter.MyViewHolder holder, 
int position) { 


) 


QOverride 
public int getlItemCount() { 
return 10; 


) 


QGOverride 
public int getItemViewType (int position) { 
if (0--position)(í 
/ LFU RIUT ERR 
return R.layout.message list item search; 
} 
IIR BAI HEMEN 
return R.layout.message list item normal; 


) 


//4$ ViewHolder ÆFA Adapter HARZ, RIESA EIE Af Sl 
class MyViewHolder extends RecyclerView.ViewHolderí 
public MyViewHolder (View itemView) { 
super(itemView); 


此 类 的 构造 方法 有 一 个 参数 : Activity， 因 为 后 面 需要 用 它 来 获取 LayoutInflater， 需 要 在 
调用 构造 方法 时 传 进来 。 

相 比 前 面 的 例子 , 这 个 Adapter 多 了 一 个 方法 getItemViewType0, 你 应 该 还 记得 它 的 作用 。 
RecyclerView 调用 它 获 取 每 一 行 对 应 的 类 型 ， 类 型 实际 上 就 是 行 的 layout 资源 ID 。 其 参数 是 
行 的 序号 ， 除 了 第 0 行 ， 其 余 各 行 的 layout 都 一 样 。 直 接 返 回 了 layout 资源 的 ID。 此 方法 告 
Vr f RecyclerView 有 不 同 的 行 layout， 于 是 在 创建 行 View 的 时 候 ， 融 需要 用 不 同 的 layout 来 
创建 了 。 此 时 , 在 onCreateViewHolerO 中 我 们 就 利用 起 了 第 二 个 参数 :viewType, 根据 viewType 
加 载 不 同 的 layout 资源 ， 因 为 viewType 就 是 layout 资源 ID。 

负责 行 数据 绑 定 的 方法 onBindViewHolder0 没 有 实现 ， 所 以 除了 顶部 行 ， 其 余 每 一 行 显示 
的 内 容 都 一 样 ， 如 图 13.3.8.3.2 所 示 。 
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标题 
ETE 
标题 
详细 措 述 


标题 
详细 描述 


eL. 

详细 描述 

C) mu 
详细 描述 
标题 
详细 描述 
标题 
详细 描述 
标题 
详细 描述 


13.3.8.3.2 


13.3.9 显示 气泡 菜单 
在 消息 页 中 ， 点 “+” 图 标 时 ， 显 示 气 泡 ， 如 图 13.3.9.1 所 示 。 


腾讯 新 闻 
19 条 干货 这 读 习 近 


服务 号 
QQ 天 气 : 【 城 阳 】 


oah © 
异 钱 ， 不 看 面子 看 ! 


我 的 其 他 QQ 帐 : 
XAS. RESF 


EL d 


一 键 导入 旧 手机 资料 
通讯 录 、 照 片 、 视 频 、 短 信 、 应 用 .…. 


13.3.9.1 
如 果 你 目光 如 炬 的 话 ， 会 发 现 显 示 这 个 气泡 菜单 时 ， 整 个 页 面 变 暗 了 ， 这 叫 蒙 板 效果 。 看 
起 来 实现 这 一 套 效果 挺 难 的 ， 但 只 要 我 们 静 下 心 来 返 一 抒 ， 会 发 现 其 实 也 没 那么 难 。 
13.3.9.14 ” 蒙 板 效 果 
蒙 板 一 般 是 在 界面 上 盖 了 一 个 半 透 明 的 View, 当然 也 可 以 用 Activity 或 Dialog 来 做 蒙 板 。 
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但 是 我 选择 使 用 View， 主 要 还 是 使 用 View 简单 一 些 。 不 像 Activity 和 Dialog, ib View 作 蒙 
板 是 有 条 件 的 ， 即 必须 保证 这 个 View 在 最 上 层 。 最 后 添加 的 View 肯定 在 最 上 层 ， 当 然 也 可 
以 设置 View 的 z 属性 强制 使 一 个 View 位 于 上 层 (x、y、z 表示 了 三 维 空间 中 的 坐标 ， 一 般 我 
们 只 关注 二 维 控件 ， 所 以 只 使 用 x My, mz 则 用 于 表示 位 于 上 层 还 是 下 层 ) 。 

要 蒙 住 整个 屏幕， 就 要 保证 作为 蒙 板 View 的 大 小 是 充满 整个 屏幕 的 ， 于 是 必须 把 这 个 
View 放 到 一 个 充满 了 屏幕 的 容器 控件 中 ，“ 消 息 ”“ 联 系 人 ”“ 动 态 ” 这 三 个 Tab 页面 都 是 
RecyclerView， 它 并 没有 充满 整个 控件 ， 也 不 可 能 把 蒙 板 View 加 进去 。 找 来 找 去 ， 感 觉 还 是 
作为 MainFragment 的 根 View 的 儿子 最 合适 .MainFragment 的 根 View 肯定 是 充满 整个 屏幕 的 ， 
但 是 它 现 在 是 一 个 LinearLayout。LinearLayout 帮 我 们 维持 导航 栏 和 内 容 的 上 下 结构 ， 我 们 需 
在 它 外 面 再 包 一 个 FrameLayout，FrameLayout 里 的 所 有 儿子 都 可 以 设置 为 充满 屏幕 ， 作 为 蒙 
板 的 控件 设置 为 FrameLayout 的 儿子 ， 与 LinearLayout 同 级 ， 就 可 以 盖 住 LinearLayout 所 代表 
的 内 容 了 。 于 是 ，fragment main.xml 的 内 容 变 成 了 这 样 : 


«FrameLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:orientation-"vertical" 
tools:context-"niuedu.com.qqapp.MainFragment"» 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:orientation-"vertical"» 


c1-— SEL E-- 

«LinearLayout 
android:layout width-"match parent" 
android:layout height-"50dp" 
android:background-"Gdrawable/nav bar bk" 
android:gravity-"center vertical" 
android:paddingLeft-"1l6dp" 
android:paddingRight-"ló6dp"» 

«/LinearLayout» 
«/FrameLayout» 


下 面 ， 我 们 改造 一 下 onCreateView0O， 将 加 载 layout 资源 的 代码 改 一 下 : 


QOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 


this.rootView- (ViewGroup) inflater.inflate(R.layout.fragment main, 


container, false); 
//X*Àk ViewPager $Ø, K Adapter KESE 
viewPager = this.rootView.findViewById (R.id.viewPager); 
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viewPager.setAdapter (new ViewPageAdapter()); 


// JK TabLayou HMHE 
tabLayout = this.rootView.findViewById (R.id.tabLayout); 


tabLayout.setupWithViewPager (viewPager); 


return rootView; 


建立 了 一 个 成 员 变 量 rootView 用 于 保存 根 View (就 是 FrameLayout) : 


private ViewGroup rootView.e 


点 这 个 “+” 号 显示 蒙 板 ， 如 图 13.3.9.1.1 所 示 。 


13.3.9.1.1 


需要 为 它 设 置 侦 听 器 ， 首 先 为 它 设 置 一 个 有 意义 的 ID， 如 网 13.3.9.1.2 所 示 。 


Properties Q c 
ID ——'"i ibptcextViewPopMenu 


layout width wrap content 


layout height wrap content 


TextView 
text 


# text 


contentDescripti... 


13.3.9.1.2 


然后 设置 Click 事件 的 侦 听 器 : 


/ / Wl GRAA BREATH 
TextView popMenu = this.rootView.findViewById(R.id.textViewPopMenu); 
popMenu.setOnClickListener (new View.OnClickListener() { 

QOverride 

public void onClick(View view) { 


Jv Ba 


// Hj Fragment gAs (FrameLayout) 办 加 入 一 个 View EI LERE PIE A 
final View mask-new View(getContext ()); 
mask.setBackgroundColor (Color. DKGRAY); 
mask.setAlpha(0.5f); 
MainFragment.this.rootView.addView (mask, 
FrameLayout.LayoutParams.MATCH PARENT, 
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FrameLayout.LayoutParams.MATCH PARENT); 
mask.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 


MainFragment.this.rootView.removeView (mask); 


在 onClick0 中 ， 首 先 创 建 蒙 板 View， 保 存在 变量 mask 中 ， 设 置 蒙 板 的 颜色 为 深 灰 色 ， 
设置 蒙 板 为 半 透 明 ， 将 蒙 板 View 加 入 根 View CFrameLayouO 中 。 注 意 addViewO 这 个 方法 ， 
它 有 很 多 重 载 的 方法 ， 我 们 使 用 的 这 个 方法 传 了 三 个 参数 ， 第 一 个 是 要 添加 的 View， 后 面 两 
个 参数 一 样 ， 还 啊 应 了 蒙 板 View 的 点 击 事件 ， 在 其 中 把 蒙 板 View MRH. MEZ App, 
在 消息 页 面 点 导航 栏 上 的 “+”， 是 不 是 蒙 上 了 ? 在 界面 上 点 一 下 ， 蒙 板 是 不 是 消失 了 ? 

代码 的 改动 都 发 生 在 MainFragment 的 onCreateViewO 中 了 ， 此 方法 的 完整 代码 是 这 样 的 : 


QOverride 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) { 
this.rootView = (ViewGroup) inflater.inflate(R.layout.fragment main, 
container, false); 
// X* IK ViewPager $f, H Adapter KESE 
viewPager = this.rootView.findViewById (R.id.viewPager); 
viewPager.setAdapter (new ViewPageAdapter ()); 


// FK TabLayou JÉBC EL 
tabLayout - this.rootView.findViewById (R.id.tabLayout); 
tabLayout.setupWithViewPager (viewPager); 


// &le&& — f RecyclerView, ZH LJ NY OO DLE, QO IRA, QO IH] UT 
listViews[0]-new RecyclerView (getContext ()); 
listViews[1]-new RecyclerView (getContext ()); 
listViews[2]-new RecyclerView (getContext ()); 


// Iis I RE layout EZB, fM ENHH 

LinearLayoutManager layoutManager = new 
LinearLayoutManager (getContext ()); 

listViews[0].setLayoutManager(layoutManager); 


// RAT WR, TARR, PIKA RANAR E 
//listViews[0].setBackgroundColor (Color.RED); 
listViews[1l1].setBackgroundColor (Color.GREEN); 
listViews[2].setBackgroundColor (Color.BLUE); 


// 7 RecyclerView KE Adapter 

listViews[0].setAdapter (new MessagePageListAdapter (getActivity())); 
listViews[1].setAdapter (new ContactsPageListAdapter ()); 
listViews[2].setAdapter (new SpacePageListAdapter()); 
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/ L BI]BE GRRE, ATERN TUA 
TextView popMenu - this.rootView.findViewById (R.id.textViewPopMenu); 
popMenu.setOnClickListener (new View.OnClickListener() { 
GOverride 
public void onClick(View view) { 
/ / [f] Fragment Zzg$ (FrameLayout) 办 加 入 一 个 View fEZJ EE S dB PIURA 
final View mask-new View(getContext ()); 
mask.setBackgroundColor (Color. DKGRAY); 


mask.setAlpha(0.5f); 
MainFragment.this.rootView.addView (mask, 
FrameLayout.LayoutParams.MATCH PARENT, 


FrameLayout.LayoutParams.MATCH PARENT); 
mask.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
MainFragment.this.rootView.removeView (mask); 
} 
}); 


}); 


return rootView; 


13.3.9.2 ”弹出 式 窗口 

蒙 板 有 了 ， 下 一 步 我 们 显示 气泡 式 菜单 。 这 个 气泡 菜单 肯定 不 是 真 的 Menu， 而 是 用 其 他 
控件 摸 拟 出 来 的 。 用 什么 控件 呢 ? 沫 单项 可 以 用 纵 同 的 LinearLayout 或 ListView 模拟 ， 但 是 
这 个 气泡 怎么 办 ? 还 有 , 我 们 希望 能 根据 所 点 击 的 控件 的 位 置 摆 放 菜单 的 位 置 ,我 们 如 果 使 用 
View 去 模拟 弹出 菜单 ， 肯 定 最 终 也 能 弄 出 来 ， 但 是 过 程 相当 麻烦 ， 最 好 能 找到 接近 我 们 的 要 
求 的 现成 的 控件 利用 一 下 。 告 诉 你 一 个 好 消息 ， 还 真有 这 么 个 东西 ， 叫 PopupWindow， 翻 译 
为 弹出 式 窗口 ， 注 意 ， 它 不 是 View， 它 具体 是 个 什么 玩意 呢 ?” 它 是 一 个 Window. 

实际 上 真正 能 承载 各 View， 把 它们 显示 出 来 ， 并 让 它们 能 啊 应 事件 的 是 Window， 而 不 
是 Activity。 我 们 一 直 的 感觉 是 Activity 承载 各 种 View, Activity 承载 Fragment， 其 实 没有 
Window，Activity 什么 都 不 是 ，Activity 只 是 管理 属于 一 个 页 面 的 控件 们 ， 它 并 不 能 承载 控件 
们 。 不 是 特殊 情况 ， 我 们 不 应 该 动用 Window， 但 现在 就 是 一 个 特殊 情况 。 

PopupWindow 能 有 像 菜 单一 样 的 行为 ， 因 为 可 以 在 显示 PopupWindow 时 指定 一 个 View 
作为 锚 ，PopupWindow 就 可 以 以 这 个 锚 的 位 置 为 参考 来 皖 放 自己 的 位 置 。 

下 面 ， 我 们 首先 实现 在 点 击 “+” 时 ， 显 示 出 PopupWindow， 然 后 再 一 步 步 改 进 。 修 改 
click 事件 啊 应 方法 ， 如 下 : 


public void onClick(View view) { 
/ / [f] Fragment RA (FrameLayout) PWA —f View EJ LERRA A 


final View mask-new View (getContext ()); 
mask.setBackgroundColor (Color. DKGRAY); 
mask.setAlpha(0.5f); 
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MainFragment.this.rootView.addView (mask, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT); 

mask.setOnClickListener (new View.OnClickListener() { 

GOverride 


public void onClick(View view) { 
MainFragment.this.rootView.removeView (mask); 


} ) ; 


//Él/£& PopupWindow, HATAR éd 

PopupWindow pop = new PopupWindow (getActivity()); 
// 为 窗口 添加 一 个 控件 
pop.setContentView (new View(getActivity())); 

// RE BOKAN: 

pop.setWidth (200); 

pop.setHeight (200); 

// NEZ Bi L1 

pop.showAsDropDown (view); 


解释 一 下 ， 从 创建 PopupWindow 开始 。 首先 创建 PopupWindow 对 象 ， 然 后 为 它 设 置 了 内 
容 View。 这 个 不 设置 是 不 是 行 的 ， 如 果 一 个 窗口 没有 内 容 ， 那 么 它 是 不 会 显示 出 东西 的 。 后 
面 又 设置 了 这 个 窗口 的 宽 和 高 ， 如 果 不 设 置 ， 它 也 不 能 显示 。 最 后 ， 在 显示 窗口 时 ， 传 入 了 做 
为 锚 的 View， 就 是 系统 在 调用 onClickO 时 为 我 们 传 入 的 参数 ， 它 就 是 发 出 Click 事件 的 控件 ， 
即 “+” 图 标 ， 这 样 一 来 ， 窗 口 就 显示 在 “+” 图 标的 下 方 了 ， 如 图 13.3.9.2.1 所 示 。 


13.3.9.2.1 


现在 还 有 很 多 问题 ， 我 们 一 个 个 解决 。 首 先是 当 点 击 蒙 板 时 窗口 也 应 该 跟着 消失 了 ， 这 个 
简单 ， 在 啊 应 蒙 板 点 击 的 方法 中 增加 代码 , 但 是 在 此 之 前 , 我 们 需要 先 把 弹出 窗口 变量 变 成 类 
的 字段 ， 因 为 它 要 在 不 止 一 个 方法 里 使 用 了 。 但 是 ,应 作为 哪个 类 的 字段 呢 ? 当然 你 可 以 直接 
放 在 MainFragment 中 ， 但 是 根据 够 用 就 行 的 原则 〈 不 要 过 度 设计 ) ， 这 个 变量 其 实 只 在 啊 应 
“+” 的 侦 听 器 类 的 范围 内 使 用 ， 所 以 作为 这 个 类 的 成 员 变 量 比较 好 ， 修 改 后 的 代码 如 下 : 
popMenu.setOnClickListener (new View.OnClickListener() { 


/ HBBLBE TENA ARE 
PopupWindow pop; 


QOverride 
public void onClick(View view) { 
/ / E] Fragment £z (FrameLayout) PWA —f* View EJ EE ZS AS RE A 
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final View mask-new View(getContext ()); 
mask.setBackgroundColor (Color. DKGRAY); 
mask.setAlpha(0.5f); 
MainFragment.this.rootView.addView (mask, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT); 
// WII SK View fiu Xf 
mask.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
// EPER 
MainFragment.this.rootView.removeView (mask); 
/ / Ka BL PP HI BT LI 
pop.dismiss(); 
} 
} ) ; 


/ / RP h BOERE, MEE 
if (pop==null) { 
//&/& PopupWindow, HATAR Jd 
pop = new PopupWindow (getActivity()); 
// BEI LT I — BTE 


this.pop.setContentView (new View(getActivity())); 
// RE ROHAN: 
this.pop.setWidth (200); 
this.pop.setHeight (200); 
} 
// NEAN BO 
this.pop.showAsDropDown (view); 


新 代码 中 ， 变 量 pop 成 了 成 员 变 量 ， 在 创建 pop 时 ,进行 了 判断 ， 这 样 就 避免 了 每 次 在 点 
击 “+” 时 重新 创建 pop。 在 响应 蒙 板 View 的 点 击 事件 中 ， 调 用 了 dismissO 隐 藏 了 pop。 再 运 
行 试 试 吧 。 

下 面 一 步 ， 我 们 把 pop 搞 成 气泡 状 。 

13.3.9.3 9-patch 图 像 


要 把 一 个 窗口 搞 成 不 规则 形状 ， 这 听 起 来 感觉 挺 难 , 但 在 Android 里 弄 实际 上 还 是 比较 简 
单 的 ， 其 实 我 们 要 做 的 就 是 搞 一 个 气泡 状 的 图 片 作 为 PopupWindow 的 背景 就 行 了 。 但 是 ， 对 
这 个 图 片 要 稍微 多 加 点 处 理 , 因为 我 们 和 希望 这 个 图 片 能 适应 控件 的 不 同 尺 寸 自动 拉 伸 而 且 不 失 
真 ， 这 咋 整 呢 ? 有 请 “9-patch” 图 像 ! 

9-patch 翻译 成 什么 才 合适 呢 ?我 也 不 知道 , 那 我 就 简称 它 为 “9P 图 ” 吧 ( 幸 亏 不 是 3-patch)。 
9P 图 有 什么 好 处 吗 ? 它 就 是 一 张 普 通 的 图 像 〈 栅 格 图 ， 不 是 矢量 图 ) ， 但 它 可 以 做 到 拉 伸 不 
失真 ， 不 失真 就 是 不 变 模 糊 啦 。 比 如 我 们 要 为 一 个 按钮 摘 一 个 有 质感 的 背景 ， 其 小 如 图 
13.3.9.3.1 所 示 , 看 起 来 不 错 , 没有 失真 , 但 其 大 如 图 13.3.9.3.2 所 示 就 不 行 了 , 看 起 来 失真 了 。 
我 们 希望 无 论 按 钮 很 大 还 是 很 小 ， 都 不 失真 ， 如 图 13.3.9.3.3 所 示 。 
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13.3.9.3.1 图 13.3.9.3.2 13.3.9.3.3 
虽然 图 13.3.9.3.3 看 起 来 凸 起 没 图 13.3.9.3.2 那么 高 , 但 是 也 保留 了 质感 , 同时 边界 没有 变 


模糊 (要求 太 高 了 也 很 难 做 到 ， 达 到 这 种 效果 就 很 不 错 了 ) 。 要 达到 这 种 效果 ,原理 也 很 简单 ， 
我 们 只 要 只 拉 伸 不 会 模糊 的 部 分 , 不 就 做 到 既 能 缩放 图 像 ， 又 不 失真 了 吗 ” 上 图 中 不 会 模糊 的 
部 分 很 明显 ， 就 是 中 间 那 块 都 是 同一 种 颜色 的 部 分 。 拉 伸 时 其 实 使 用 了 插值 算法 ， 如 果 一 个 插 
值 点 跟 左 右 的 点 是 同一 种 颜色 ,那么 横 癌 拉 伸 时 , 计算 出 的 这 个 插值 点 的 颜色 肯定 与 左右 相同 ， 
在 纵 回 上 也 一 样 ， 也 就 是 说 有 的 部 分 可 以 横 疝 拉 伸 而 不 失真 ， 有 的 部 分 纵 同 拉 伸 不 失真 ， 而 如 
果 一 个 插值 点 的 上 下 左右 都 是 同一 颜色 的 话 ， 怎 么 拉 伸 都 不 失真 。 

9P 图 就 能 告诉 Android 系统 ， 这 个 图 片 中 哪些 部 分 可 以 拉 伸 ， 哪 些 部 分 不 可 以 拉 伸 。9P 
图 的 原理 是 这 样 的 〈 如 图 13.3.9.3.4 所 示 ) : 


图 13.3.9.3.4 


注意 中 间 白 色 部 分 才 是 真正 的 图 片 ,你 在 做 图 时 ,至少 要 在 上 下 左右 留 出 一 个 像素 的 空白 ， 
然后 如 上 图 那样 , 用 纯 黑 色 在 左边 和 顶部 划 出 两 条 直线 , 这 两 条 直线 分 别 标 出 了 纵 同 可 拉 伸 区 
和 横 回 可 拉 伸 区 ， 那 么 最 终 的 可 拉 伸 区 就 是 两 个 区 域 的 交集 ， 即 图 中 间 的 虚线 框 。 同 时 ， 这 个 
区 域 也 是 内 容 所 在 区 ， 不 可 拉 伸 的 区 域 就 是 Padding， 即 内 部 空白 ， 这 一 切 都 是 Android 系统 
自己 处 理 的 ， 你 只 要 把 一 个 9P 图 设置 给 一 个 控件 ， 那 么 这 个 控件 就 会 把 内 容 放 在 可 拉 伸 区 ， 
非 拉 伸 区 目 动 成 为 Padding。 

但 是 ， 你 可 能 想 让 内 容 区 不 是 由 拉 伸 区 来 决定 ， 而 是 自 定 义 一 个 区 域 ， 那 么 就 用 到 了 右边 
和 下 边 这 两 条 黑 线 ， 如 图 13.3.9.3.5 所 示 。 


Padding box 
(optional) 


13.3.9.3.5 
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所 以 做 9P 图 的 一 个 重点 是 至 少 在 四 周 留 出 1 像素 的 空白 ， 即 使 右边 和 下 边 不 想 画 黑 线 ， 
也 要 留 空 日 。 

最 后 ， 如 何在 工程 中 保存 9P 图 呢 ?” 在 文件 名 后 , 扩展 名 前 ， 加 上 9p， 比 如 : "abc.9p.jpg" 
“hhh.9p.png”。 


13.3.9.4 创建 气泡 9P 图 


由 于 是 非 规则 图 像 ， 所 以 要 用 PNG 格式 ， 因 为 PNG 文 持 像素 透明 。 不 论 什 么 图 像 ， 实 
际 上 都 是 方 的 , 比如 要 显示 圆 角 , 就 要 把 不 显示 的 那些 像素 置 成 透明 , 也 就 是 说 像素 是 存在 的 ， 
但 设置 成 了 透明 。 

注意 透明 与 白色 不 是 一 回 事 。 我 们 知道 用 RGB 三 元 素 可 以 混和 出 所 有 颜色 ， 于 是 在 计算 
机 中 每 个 像素 都 是 用 RGB 三 部 分 组 成 ， 每 个 部 分 占 一 个 字 节 ， 这 三 部 分 使 用 不 同 的 值 就 混 出 
了 不 同 的 颜色 。 但 是 ， 无 论 它们 是 什么 值 ， 都 混 不 出 透明 色 。 有 人 可 能 问 ， 这 三 部 分 都 是 0 
Tr? 不 行 ， 都 是 0 的 话 是 纯 黑 色 。 为 了 能 表示 透明 ， 有 聪明 人 想 出 了 一 个 主意 : 为 像素 增 
加 新 的 部 分 : Alpha， 也 就 是 表示 透明 度 的 部 分 〈 术 语 叫 通道 ， 英 文 为 channal) ， 于 是 一 个 像 
素 就 由 ARGB 四 部 分 组 成 ，A 的 值 越 小 ， 越 透明 ， 越 大 越 不 透明 ， 为 0 时 全 透明 ， 为 最 大 时 
(255) 完全 不 透明 。 

图 13.3.9.4.1 所 示 是 我 仅 发 挥 了 千 分 之 一 的 艺术 细胞 所 创作 出 来 的 气泡 图 。 
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lè] contacts normal.png 
kà edit bk normal.xml 

kà edit bk selector.xml 

kà list item bk.xml 

kà list item bk selector.xml 
l| message focus.png 

l| message normal.png 
kà nav bar bk.xml 

国 pop bk9.png 

E] qq.png 

lë] space normal.png 

lë] spacs focus.png 

kà tab bar bk.xml 

kà tab bar bk selector.xml 


build.gradle (Project: QQApp) 
build.gradle (Module: app) 


图 13.3.94.1 
注意 红 箭头 所 指 回 的 两 条 黑 线 ， 指 定 了 可 拉 伸 区 《其 实 不 是 仅 能 拉 伸 ， 还 可 以 缩小 ， 所 以 
准确 地 说 应 是 缩放 区 ) ， 我 们 可 以 看 到 黑白 块 相 间 的 图 案 ， 那 表示 画布 ， 能 看 到 这 些 图 案 ， 说 
明 这 部 分 是 透明 的 。 最 右边 上 下 两 个 图 像 是 预览 效果 ， 上 面 的 是 拉 长 后 的 样子 ， 下 面 的 是 变 宽 
后 的 样子 。 好 了 ， 现 在 可 以 把 这 个 图 像 设置 成 PopupWindow 的 背景 了 ， 代 码 如 下 : 


/ /如果 弹 出 窗口 还 未 创建 ， 则 创建 它 
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if(pop--null) { 
// É//£& PopupWindow, MATAR TURA 
pop = new PopupWindow(getActivity()); 
/ / IS BEI, UEA window HAAR 
Drawable drawable = getResources().getDrawable (R.drawable.pop bk); 
// E TERRA window MAR 


pop.setBackgroundDrawable (drawable); 

/ / 79 BI TIS I — P TRE 

this.pop.setContentView(new View(getActivity())); 
this.pop.setWidth (200); 

this.pop.setHeight (200); 


运行 App， 效 果 如 图 13.3.9.4.2 所 示 。 


图 13.3.9.4.2 
有 点 效果 了 。 下 面 把 菜单 内 容 显 示 出 来 。 
13.3.0.5 ”显示 菜单 内 容 


菜单 内 容 用 一 个 纵 癌 的 LinearLayout 来 承载 ， 我 们 为 菜单 创建 一 个 layout 资源 
pop menu layout.xml， 其 内 容 如 下 : 


<?xml version-"1.0" encoding-"urtf-8"?» 

«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:orientation-"vertical"» 


«LinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:gravity-"center vertical"» 


«ImageView 
android:layout width-"40dp" 
android:layout height-"wrap content" 
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android:layout marginEnd-"20dp" 
app:srcCompat-"Gmipmap/ic launcher round" 


«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 创 建 群 聊 " /> 
«/LinearLayout» 


«LinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:gravity-"center vertical"» 


«ImageView 
android:layout width-"40dp" 
android:layout height-"wrap content" 
android:layout marginEnd-"20dp" 
app:srcCompat-"Gmipmap/ic launcher round" 


«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 


android:text=" 加 好 友 / 和 群 " /> 
«/LinearLayout» 


«LinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:gravity-"center vertical"» 


«ImageView 
android:layout width-"40dp" 
android:layout height-"wrap content" 
android:layout marginEnd-"20dp" 


> 


{> 


app:srcCompat-"Gmipmap/ic launcher round" /> 


<TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"14—14" /> 


«/LinearLayout» 


«LinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:gravity-"center vertical"» 
«ImageView 
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android:layout width="40dp" 

android:layout height-"wrap content" 
android:layout marginEnd-"20dp" 
app:srcCompat-"G8mipmap/ic launcher round" /> 


«TextView 
android:id-"Q«id/textView6" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 


android:text=" 面 对 面 快 传 "” /> 
</LinearLayout> 


<LinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:gravity-"center vertical"» 


«ImageView 
android:layout width-"40dp" 
android:layout height-"wrap content" 
android:layout marginEnd-"20dp" 
app:srcCompat-"8mipmap/ic launcher round" /> 


«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 付 款 " /> 


</LinearLayout> 
</LinearLayout> 


预览 图 是 这 样 的 ， 如 图 13.3.9.5.1 所 示 。 


图 13.3.9.5.1 
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下 面 修 改 创 建 PopupWindow 时 的 代码 ， 把 它 的 内 容 设 为 这 个 layout: 


/ /如果 弹出 窗口 还 未 创建 ， 则 创建 它 
if(pop--null) { 
//&/& PopupWindow, //T77KÉZt^ x 
pop = new PopupWindow(getActivity()); 
/ / IUSGEI UE, XH LinearLayout fÉJUU 4 
LinearLayout menu - (LinearLayout) 
LayoutInflater.from(getActivity()).inflate( 
R.layout.pop menu layout, null); 


// Ie B window PÆRER HI View 


pop.setContentView (menu); 


/ / IE TERR, UEN window HAR 

Drawable drawable = getResources().getDrawable (R.drawable.pop bk); 
// E TURIRA window MASK 

pop.setBackgroundDrawable (drawable); 

// BEBE LIA 

this.pop.setWidth (200); 

this.pop.setHeight (200); 


执行 App, AX 13.3.9.5.2 所 示 。 


13.3.9.52 


菜单 内 容 出 现 了 , 但 是 ， 宽 度 不 对 ， 文 字 不 应 该 换行 ， 而 且 菜 单 显 示 也 不 全 ， 这 应 该 是 因 
为 我 们 为 窗口 设置 了 固定 宽 和 高 的 原因 , 我 们 应 该 让 窗口 根据 菜单 的 内 容 自 动 调整 大 小 。 修改 
后 的 代码 如 下 : 


//4 RA ROERE, M/EJEE ET 
if (pop==null) { 
//Éfl/& PopupWindow, //T7/KÉ(^ d 
pop = new PopupWindow(getActivity()); 
/ / IECUR, ÆW LinearLayout f&TUfG 3e 
LinearLayout menu - (LinearLayout) 
LayoutInflater.from(getActivity()).inflate( 


R.layout.pop menu layout, null); 
// il Í— FRÉ layout PERAJE 
menu.measure(0, 0); 
int w — menu.getMeasuredWidth(); 
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int h = menu.getMeasuredHeight(); 


// BRE window EIE 


pop.setHeight(h + 60); 

// HE window IE EAE 
pop.setWidth(w + 60); 

// RE window PWI HI view 


pop.setContentView (menu) ; 


/ / Iit TERR, UEN window MARK 
Drawable drawable = getResources().getDrawable (R.drawable.pop bk); 


// RAE TURRA window MAF 
pop.setBackgroundDrawable (drawable); 


加 粗 部 分 是 新 加 入 的 代码 , 这 些 代 码 使 窗口 能 自动 适应 内 容 。 首 先 调用 了 作为 内 容 的 View 
的 measure0 方 法 ， 这 个 方法 会 根据 此 View 的 内 容 计算 出 此 View 在 显示 时 的 实际 大 小 ， 然 后 
取得 此 View 的 实际 宽 和 高 ， 然 后 各 加 了 60 ， 然 后 设置 给 了 窗口 的 宽 和 高 属性 ， 多 加 的 60 
其 实 是 9P 图 带 来 的 Padding 的 大 小 。 

实际 上 ， 如 果 你 的 Android 系统 是 7.0 以 上 的 版 本 ， 那 么 这 几 句 是 不 需要 的 ， 系 统 会 自动 
计算 弹出 窗口 该 有 的 大 小 。 

现在 再 运行 ， 效 果 如 图 13.3.9.5.3 Bran. 


创建 群 聊 
加 好 友 / 群 


扫 一 扫 


面对面 快 传 


付款 


13.3.9.5.3 


有 点 意思 了 ， 但 是 ， 还 有 一 个 问题 : 弹出 窗口 太 靠 右 了 ， 应 该 离开 一 点 距离 ， 这 个 容易 ， 
使 用 显示 窗口 的 另外 一 个 重 载 方法 即 可 ， 修 改 如 下 : 


/ / urA L1 


此 方法 的 第 一 个 参数 与 原来 相同 ， 指 的 是 作为 销 点 的 View， 第 二 个 参数 是 横 坐 标 上 的 偏 
移 ， 第 二 个 是 纵 坐 标 上 的 偏 移 。 都 给 的 是 负数 ， 意 思 是 回 左 移 一 些 ， 问 上 移 一 些 ， 效 果 如 网 
13.3.9.5.4 所 示 。 
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面对面 快 传 


付款 


13.3.9.5.4 


为 了 让 这 个 菜单 中 的 内 容 保持 正常 的 排版 , 你 最 好 把 文字 的 字体 和 大 小 固定 下 来 , 否则 有 
人 调整 系统 字体 后 ， 这 里 可 能 就 不 那么 “ 帅 ” 了 。 


13.3.9.6” 自 定义 窗口 动画 


现在 的 气泡 菜单 是 有 动画 的 ， 是 系统 给 定 的 默认 动画 ， 且 动画 时 间 比 较 短 。 而 QQApp 的 
气泡 菜单 出 现时 没有 动画 ， 关 闭 时 用 了 缩小 动画 ， 且 动画 时 间 比 较 长 。 我 们 可 以 定制 一 下 
PopupWindow 的 动画 ， 使 其 动画 与 QQApp 相同 。 

新 版 的 Android 系统 中 为 PopWindow 增加 了 setEnterTransition() 和 setExitTransition() 7; iX: 
来 设置 窗口 的 显示 和 隐藏 动画 ， 但 是 为 了 照顾 旧版 的 系统 ， 我 们 需要 用 另 一 个 方法 : 
setAnimationStyle()。 这 个 方法 需要 一 个 style 的 资源 id, 动画 就 包含 在 这 个 style 中 ， 所 以 首先 
我 们 要 添加 一 个 style。 在 res/values/styles.xml 文件 中 增加 新 的 style: 

<style name="popoMenuAnim" parent="android:Animation"> 
< 一 一 < 了 万 Ga 
u———————— 
<item name-"android:windowExitAnimation"»8anim/popo menu hide«c/item» 
«/style» 


我 们 可 以 指定 窗口 显示 时 的 动画 C windowEnterAnimation ) ， 窗 口 消失 时 的 动画 
(windowExitAnimation〉， 我 们 实际 上 只 指定 了 消失 时 的 动画 ， 这 样 在 显示 窗口 时 就 没有 动 
男 了 。 现 在 还 需要 创建 一 个 动画 资源 popo menu hide.xml， 放 在 res/anim F: 


<?xml version-"1.0" encoding-"utf-8"?» 

«set xmlns:android-"http://schemas.android.com/apk/res/android" 
android:shareInterpolator-"8android:anim/accelerate interpolator" 
android:duration-"500"» 


«r--ABAEI Ef, ES A--» 


«scale 
android:fromXScale-"1.0" 
android:toXScale-"0.0" 
android:fromYScale-"1.0" 
android:toYScale-"0.0" 
android:pivotX-"100$" 
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android:pivotY-"0$"» 
«/scale» 


«alpha android:fromAlpha-"0.6" 
android:toAlpha-"0" /> 
«/set» 


这 个 动画 资源 中 包含 了 两 个 动画 ， 同 时 执行 ， 同 时 结束 ， 执 行 时 间 是 5003ER£ CER). 
第 一 个 动画 是 缩放 动画 ， 在 横 坐 标 和 纵 坐 标 上 都 是 从 100% 缩 小 到 0， 缩小 的 中 心 点 我 们 X 轴 
上 设 在 最 右边 〈android:pivotX="100%") ， 在 立轴 上 设 在 了 最 上 边 Candroid:pivotY-"096") ， 
所 以 缩小 时 就 往 右 上 角 缩 。 

现在 再 运行 App， 看 看 气泡 菜单 的 出 现 和 消失 ， 是 不 是 跟 QQApp 一 样 了 ? 

13.3.9.7 ”点 返回 键 时 消失 

还 有 一 个 问题 没 解决 ， 出 现 气泡 菜单 后 ， 按 下 返回 键 菜 单 不 消失 。 这 个 问题 很 容易 解决 ， 
只 需要 为 PopupWindow 对 象 调用 方法 setFocusable(true) 即 可 。 当 窗口 创建 后 设置 一 次 即 可 。 
下 面 是 啊 应 点 击 “+” 图 标的 所 有 代码 : 


popMenu.setOnClickListener(new View.OnClickListener() { 
/ / TH2É HI BT LITE P I RE 
PopupWindow pop; 


QOverride 
public void onClick(View view) { 
/ / [f] Fragment RA (FrameLayout) PHA —f* View EJLER S RE A 
final View mask-new View(getContext ()); 
mask.setBackgroundColor (Color. D KGRAY); 
mask.setAlpha(0.5f); 
MainFragment.this.rootView.addView (mask, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT); 
// WV SK View fiti; Xf 
mask.setOnClickListener(new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
MESE dd 
MainFragment.this.rootView.removeView (mask); 
/ / I ELA HI B LI 
pop.dismiss(); 
} 
)); 


/ / ARP R OERE, MIEJEE T 
if(pop--null) { 
// &/£& PopupWindow, HA TÆR TURA 
pop = new PopupWindow(getActivity()); 
// Ist XE AUIBUS, Æ LinearLayout fÉJUfJAe 4H 
LinearLayout menu - (LinearLayout) 
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LayoutInflater.from(getActivity()).inflate( 
R.layout.pop menu layout, null); 


menu.measure(0, 0); 

int w = menu.getMeasuredWidth(); 
int h = menu.getMeasuredHeight () ; 
// RE window Pim 
pop.setHeight(h + 60); 

// RE window Hi R 

pop.setWidth (w + 60); 

// RE window PEII View 
pop.setContentView (menu); 


/ / WR REIR, UER window HAR 
Drawable drawable = getResources().getDrawable (R.drawable.pop bk); 
// ELO y window HAR 
pop.setBackgroundDrawable (drawable); 
pop.setAnimationStyle(R.style.popoMenuAnim); 
// RE R LI HUBER RREA, BER TERRI, BLUT ZRBA 

pop.setFocusable(true); 

} 

/ / NEAN Bj L1 

pop.showAsDropDown (view,-pop.getWidth()-740,-10); 


注意 增加 了 setFocusableO 的 调用 。 
13.3.9.8 ”让 蒙 板 View 成 为 单 例 
看 起 来 不 错 了 ， 但 是 ， 接 下 来 还 要 考虑 一 下 代码 优化 的 问题 ， 见 下 面 代码 : 


public void onclick(view view) { 
// ljFragment 2: 3*( FrameLayout ) FHA —fwiewfFE y LAR P Ar RI TR 
final view mask-new View(getcontext()); 
groundColor(Color.DKGRAY); 


MainFgSBgment.this.rootView.addView(mask, 
FrameLayout.LayoutParams.MATCH PARENT, 


FrameLayout.LayoutParams.MATCH PARENT); 
7 / lg hy S eV ew PE dr d F 
mask.setonClickListener((view) > 1 

// J- hate 

J d s 4-3 c 


MainFragment.this.rootView.removeView(mask); 


7 


Vo E M 1 I 
AI AR «x ^F ll ] I fi / 


pop.dismiss(); 


注意 蒙 板 View 变量 mask， 每 次 点 击 “+” 图 标 时 ， 蒙 板 View 部 会 创建 一 个 新 的 ， 蒙 板 
View 可 能 要 反复 出 现 ， 所 以 我 们 可 以 优化 一 下 代码 ， 把 它 搞 成 一 个 字段 。 作 为 哪个 类 的 字段 
呢 ? 最 好 还 是 啊 应 “+” 图 标点 击 事件 的 侦 听 品类 ， 修 改 后 代码 如 下 : 
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PopupWindow pop; 
View mask; 


@Override 
public void onClick(View view) ( 


/ 


// lFlFragment f? 4*( FrameLayout ) PMA — fWiewfF y EE! Ra BUE UE 


(mask--null) { 

mask - new View(getContext()); 

mask.setBackgroundColor(Color.DKGRAY); 
mask.setAlpha(0e.5f); 


// "ih s fRviewif ede d ff 

mask. setonclicktistener( (view) > ( 
f/f KI fi! Y ENG 
Mainrragment. this.rootview.removeview(mask); 
f) / j 3 EL Hf; j >i LI 
pop.dismiss(); 

1); 

} 


ILER iew p flFragment /7fdView (FrameLayout F 
MainFragment.this.rootView.addView(mask, 


FrameLayout.LayoutParams.MATCH PARENT, 
一 FrameLayout.LayoutParams.MATCH PARENT); 
注意 ， 现 在 对 mask 变量 是 否 为 null 进行 了 判断 ， 其 效果 是 如 果 蒙 板 View 已 被 创建 ， 就 
不 再 创建 之 ， 这 种 设计 模式 叫 “ 单 例 ”。 
13.3.9.9 让 蒙 板 随 窗口 消失 
当 窗 口 消失 时 ， 蒙 板 也 应 该 消失 ， 比 如 按 下 返回 键 时 ， 窗 口 消失 ， 但 蒙 板 不 会 跟着 消失 。 
如 何 改正 这 个 问题 呢 ? 非常 容易 ， 窗 口 有 一 个 方法 setOnDismissListener()， 很 明显 ， 通 过 它 可 
以 啊 应 窗口 的 消失 事件 ， 在 其 中 我 们 让 蒙 板 也 消失 ， 代 码 如 下 : 
pop.setOnDismissListener(new PopupWindow.OnDismissListener() { 
(override 
public void onDismiss() ( 


Epa == £r 
/ f Ze x f 


MainFragment.this.rootView.removeView(mask); 


现在 ， 啊 应 “+” 图 标的 代码 是 这 样 的 : 


/ / Wil pur GRRR dr TE, BREAN TURP 
TextView popMenu = this.rootView.findViewById (R.id.textViewPopMenu); 
popMenu.setOnClickListener (new View.OnClickListener() { 

/ / TEUPÉ HI BT LITE PLC A IR 

PopupWindow pop; 

View mask; 


QOverride 


public void onClick(View view) { 
// E] Fragment gA (FrameLayout) 让 加 入 一 个 View EJI ES AS RUE A 
if(mask--null) | 
mask = new View(getContext()); 
mask.setBackgroundColor (Color. DKGRAY); 
mask.setAlpha(0.5f); 
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/ / BASE IK View Ie dr f 


mask.setOnClickListener(new View.OnClickListener() { 


QGOverride 

public void onClick(View view) { 
ELE d 
MainFragment.this.rootView.removeView (mask); 
/ / haik 7A BT LI 


pop.dismiss(); 


)); 


// 3E fK View AMP] Fragment HIR View (FrameLayout) 办 

MainFragment.this.rootView.addView (mask, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT); 


/ / JUPE HI ROERE, MEIST 
if(pop--null) í( 
// É/f& PopupWindow, HATAR TURP 
pop = new PopupWindow (getActivity()); 
// Iste 4 UIERUN, XM LinearLayout féJUfJg3e 4 
LinearLayout menu - (LinearLayout) 
LayoutInflater.from(getActivity()).inflate( 
R.layout.pop menu layout, null); 


// Il ÍE — F3EÉ layout PEBRA NES EE XEHCZ. 
menu.measure(0, 0); 

int w = menu.getMeasuredWidth (); 
int h = menu.getMeasuredHeight (); 
// RE window im 

pop.setHeight(h + 60); 

// RE window HI R 

pop.setWidth (w + 60); 

// RE window PEII View 
pop.setContentView (menu); 


//L WR TERR, DIEI window HAA 
Drawable drawable = getResources().getDrawable (R.drawable.pop bk); 
// RB TURBA window HAA 
pop.setBackgroundDrawable (drawable); 
pop.setAnimationStyle(R.style.popoMenuAnim); 
// RE BR OHRI A A OWK IT TDA KZ f 
pop.setOnDismissListener(new PopupWindow.OnDismissListener() { 

QOverride 

public void onDismiss() { 

// X PAS 


MainFragment.this.rootView.removeView (mask); 


}); 
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// RE B LTIULIUBT YER, SIEI TERR, BOJ RHA 


pop.setFocusable(true); 


} 
/ / AE ZI Bi L1 
pop.showAsDropDown (view,-pop.getWidth()-740,-10); 


13.3.10 HEAR 


在 QQApp 的 “消息 ”页 面 中 ， 点 左上 角 的 QQ 头像 图 标 ， 会 从 左边 滑 出 划 出 一 个 页 面 ， 
但 这 个 页 面 不 会 占据 整个 界面 , 而 是 在 右边 留 下 一 部 分 , 这 部 分 正好 显示 “消息 ”页 面 的 网 标 ， 
如 图 13.3.10.1 和 图 13.3.10.2 所 示 。 


es 
CN 
"EN | "a Sx 
"BER ENESE 2 Ha ^ 
EHE senes 7 ANGE Wi EN NOE. N 4 


我 的 其 他 QQ 帐号 dz 
1 个 帐号 有 新 消息 e Ü] 了 解 会 员 特 权 


服务 号 MEE i dis 四 QQ 钱包 
QQ 天 气 :【 城 阳 ] 阴 97/17*, 07:05 更 新 ~ 


(2) QQ 购物 从 CD 个 性 装扮 


王牌 代言 洁 丽 雅 专 场 


内 ”我 的 收藏 
[al] 我 的 相册 
O 我 的 文件 
(O) 免 流 三 特权 


Gum" € 夜间 


图 13.3.10.1 图 13.3.102 


这 个 变化 有 个 动画 过 程 , 新 页 面 往 右 移 同 时 消息 页 面 也 往 右 移 , 看 起 来 好 像 是 新 页 面 把 旧 
AEGA., A Ramada WufE "AJ" . Android SDK 在 其 support 库 中 提供 
了 一 个 抽 屋 控件 : DrawerLayout， 使 用 它 可 以 很 容易 地 做 出 一 种 抽 屠 效果 ， 与 这 里 的 效果 有 些 
不 同 ，DrawerLayonut 会 覆盖 在 原 页 面 的 上 面 ， 而 不 会 把 原 页 面 推 走 ， 所 以 我 们 不 能 利用 
DrawerLayout 控件 ， 而 需要 自己 实现 QQApp 的 抽 屋 效果 。 

如 何 实 现 呢 ”我们 只 要 让 抽 居 页 面 与 原 页 和 面 属于 同一 个 layout 控件 , 为 新 页 面 和 原 页 面 分 
别 设置 位 移动 画 ， 让 它们 俩 同时 癌 右 移 即 可 。 但 要 注意 ,不 要 在 layout 中 创建 抽 层 页面， 只 有 
当 点 击 QQ 头像 图 标 时 ， 我 们 才 动 态 创建 出 新 页 面 ， 把 它 加 入 到 父 控件 中 ， 并 开始 动画 。 

因为 一 切 发 生 在 MainFragment 中 ，MainFragment 中 的 控件 树 如 图 13.3.10.3 所 示 。 
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Component Tree 


* 口 FrameLayout 


* 至 LinearLayout (vertical) 


* Iil LinearLayout (horizontal 


网 imageView3 
^» textView3 - ^'^ 
^» textViewPopMenu 
局 viewPager (QQViewPager) 
v ""tabLayout 
H Tabltem 
3 Tabltem 
3 Tabltem 


图 13.3.10.3 


TR FrameLayout 只 是 一 个 容器 ， 页 面 的 主要 内 容 包 在 红 箭头 指 回 的 LinearLayout 中 ， 为 什么 
不 直接 把 LinearLayout 作为 根 呢 ? 还 记得 前 面 实现 泡 泡 菜单 的 过 程 吗 ? 使 用 FrameLayout 的 原因 
主要 是 它 内 部 的 控件 可 以 任意 摆 放 位 置 ， 且 后 添加 的 子 控件 能 履 盖 已 存在 子 控件 。 我 们 让 抽 屠 效 
果 依 然 发 生 在 FrameLayout 中 ， 我 们 动态 创建 抽 居 页面 并 添加 到 FrameLayout 中 ， 利 用 动画 移动 
它 ， 同 时 也 利用 动画 移动 箭头 所 指 的 LinearLayout。 因 为 用 代码 操作 这 个 LinearLayout， 我 们 为 它 
设置 id 为 contentLayout。 下 面 创 建 抽 敢 layout 资源 ， 模 仿 出 QQ 的 样子 。 


13.3.10.1 创建 抽 居 页 面 
添加 一 个 layout 资源 文件 drawer layout.xml， 在 其 中 创建 抽 居 页 面 ， 其 内 容 如 下 : 


<?xml version-"1.0" encoding="utf-8" ?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:background-"8android:color/white" 
android:orientation-"vertical"» 
«LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:background-"Gandroid:color/holo blue light" 
android:orientation-"vertical"» 
«ImageView 
android:id-"Q8-cid/imageView3" 
android:layout width-"wrap content" 
android:layout height-"40dp" 


android:layout gravity-"end" 


android:layout marginTop-"lO0dp" 
android:paddingTop-"ldp" 
app:srcCompat-"8drawable/barcode" /> 

«LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:background-"8android:color/holo blue bright" 
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android:gravity="center vertical" 
android:orientation-"horizontal" 
android:paddingBottom-"10dp" 
android:paddingEnd-"20dp" 
android:paddingStart-"20dp" 
android:paddingTop-"1l0dp"» 


«android.support.v/7.widget.CardView 
android:layout width-"40dp" 
android:layout height-"40dp" 
android:clipChildren-"true" 
app:cardCornerRadius-"20dp"» 
«ImageView 

android:id-2"Q8-cid/imageView4" 

android:layout width-"wrap content" 
android:layout height-"wrap content" 
app:srcCompat-"G8drawable/contacts normal" /> 

«/android.support.v7.widget.CardView» 

«TextView 
android:id="@+id/textView8" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"lO0dp" 
android:text=" 田 中 龟 孙 " 
android:textColor-"Qandroid:color/white" 
android:textSize-"24sp" /» 

«/LinearLayout» 
«TextView 
android:id-"Q-cid/textView9" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"20dp" 
android:paddingBottom-"1l0dp" 
android:paddingTop-"1l0dp" 
android:text=" 昨 晚上 号 多 了 ， 今 天 不 上 班 " 
android:textColor-"Q8android:color/white" /> 
«/LinearLayout» 
«TableLayout 
android:layout width-"match parent" 
android:layout height-"0dp" 
android:layout weight-"1" 
android:padding-"6dp"» 
«TableRow 

android:layout width-"match parent" 

android:layout height-"match parent" 

android:gravity-"center vertical"» 

«ImageView 
android:id-"8-4id/imageView5" 
android:layout width-"40dp" 
android:layout height-"40dp" 


295 


Android 9 编程 通俗 演义 


296 


app:srcCompat-"8mipmap/ic launcher round" 
«TextView 

android:id-"Q-4id/textViewlO" 

android:layout width-"wrap content" 

android:layout height-"wrap content" 

android:layout marginLeft-"l0dp" 


android:text-"][ f RnR" /> 


«/TableRow» 
«TableRow 


android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"» 
«ImageView 
android:id-"8-4id/imageView6" 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"G8mipmap/ic launcher round" 
«TextView 
android:id-"Q*id/textViewll" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"l0dp" 
android:text-"QQ 钱包 " /> 


«/TableRow» 
«TableRow 


android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"» 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"8mipmap/ic launcher round" 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"lO0dp" 
android:text-"^ EXE" /> 


«/TableRow» 
«TableRow 


android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"» 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"G8mipmap/ic launcher round" 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"l0dp" 


/> 


/» 


f> 


/> 
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android:text=" 我 的 收藏 ” /> 
«/TableRow» 
«TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"» 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"8mipmap/ic launcher round" /> 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"l0dp" 
android:text=" 我 的 相册 " /> 
«/TableRow» 
«TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"» 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"G8mipmap/ic launcher round" /> 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"l0dp" 
android:text=" 我 的 文件 "” /> 
«/TableRow» 
«TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"» 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"8mipmap/ic launcher round" /> 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"lO0dp" 
android:text=" 免 流量 特权 " /> 
</TableRow> 
</TableLayout> 


<LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
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android:orientation-"horizontal" 
android:padding-"6dp"» 
«ImageView 
android:layout width-"30dp" 
android:layout height-"30dp" 
app:srcCompat-"8Gmipmap/ic launcher round" 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginRight-"30dp" 
android:text-"i*H" /> 
«ImageView 
android:layout width-"30dp" 
android:layout height-"30dp" 
app:srcCompat-"8mipmap/ic launcher round" 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout weight-"1" 
android:text=" 夜 间 " /> 
</LinearLayout> 


</LinearLayout> 


其 中 @drawable/barcode 是 一 张 条 人 码 图 片 ， 请 看 上 和 面 代码 。 
注意 抽 导 页面 的 背景 色 被 置 为 白色 (android:background="(@android:color/white") ， 如 果 
不 设置 颜色 的 话 ， 默 认 是 透明 的 。 其 整体 预览 图 如 图 13.3.10.1.1 所 示 。 


图 13.3.10.1.1 


13.3.10.2 ”响应 头像 点 击 事件 
接 下 来 要 响应 点 击 如 图 13.3.10.2.1 所 示 的 控件 。 
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~ -~ [] Nexus4~ x26 * &Apprheme Attributes Q [e $- -1 


e 1 日 33% 9 L1 & A 
layout ys wrap content 
ut height wrap content 


* Layout Margin — [?, 2, ?, 2, ?] 
> Padding [?, ?, ?, ?, ?] 
» Theme 


elevation 
srcCompat ?android:attr/textSelec 
accessibilityLiveRt 


accessibilityTravet 
accessibilityTravet 
adjustViewBounds[-) 
alpha 

autofillHints 
background 
backgroundTint 
backgroundTintM 
baseline 
baselineAlignBott [=] 
clickable m 
contentDescriptio 
contaxt lickahla C 


13.3.10.2.1 


首先 需要 为 它 设 置 一 个 jd, 我 把 它 命 名 为 headImage。 在 MainFragment 类 的 onCreateView() 
方法 中 ， 添 加 对 此 控件 的 点 击 侦 听 器 : 


/ / WIL AE LEER dr TE. du NIHU UI IT 
ImageView headImage = rootView.findViewById(R.id.headImage); 
headImage.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 


Hi 


在 onClick0 中 ， 首 先 我 们 从 drawer layout.xml 创建 出 抽 居 页 面 ， HA hE AAR 
View ( 即 FrameLayout) 中; 然后 创建 动画 ， 使 抽 导 页面 从 左边 移出 来 : 还 要 创建 动画 ， 使 原 
内 容 同 右 移 ， 直 到 只 剩 下 其 最 左边 那 一 列 图 像 。 

因为 原 内 容 并 不 是 全 部 消失 , 而 是 剩余 左边 的 那 一 列 图 像 ， 此 时 其 移 过 的 区 域 全 部 被 抽 屠 
页 面 所 填充 。 所 以 我 们 要 先 计 算出 图 像 的 宽度 CA 处 所 示 ) ， 用 FragmeLayout 的 宽度 减 去 这 
个 宽度 ， 就 是 抽 敢 页 面 的 宽度 CB 处 所 示 ) ， 如 图 13.3.10.2.2 所 示 。 


DC) 了 解 会 员 特 权 
[] QQ 钱包 


(a) 免 流 量 特 权 


6 


oim" C wis 青岛 市 


图 13.3.10.2.2 
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图 像 的 宽度 是 固定 的 ， 我 们 在 设计 消息 列表 的 Item Layout 时 ， 指 定 了 图 像 为 50dp X 50dp 
的 大 小 ， 这 里 再 加 上 点 Margin 的 大 小 ， 定 为 60dp 就 差不多 了 。 但 是 注意 一 件 事 ， 在 代码 中 ， 
宽度 单位 都 是 像素 ,我 们 要 用 这 个 宽度 来 计算 抽 居 页 面 的 宽度 时 ， 必 须 把 dp 转 成 像素 (x) ， 
这 个 转换 很 简单 ， 根 据 屏幕 的 DPI 来 计算 即 可 。 我 创建 了 一 个 工具 类 ， 专 门 提 供 了 两 个 方法 ， 
从 dp && px. AM px £& dp. WF: 


public final class Utils { 
// REFIRE dp HAR ERA px (f) 
public static int dip2px(Context context, float dpValue) { 
final float scale = context.getResources ().getDisplayMetrics().density; 
return (int) (dpValue * scale + 0.5f); 


) 


/ HR ETIAM px(IIRER) HAR FA dp 

public static int px2dip(Context context, float pxValue) { 
final float scale = context.getResources ().getDisplayMetrics().density; 
return (int) (pxValue / scale + 0.5f); 


使 用 这 个 类 ， 先 计算 原 页 面 中 左边 那 列 图 像 的 宽度 : 

再 计算 抽 居 页 面 的 宽度 : 

有 了 这 个 宽度 ， 我 们 就 可 以 创建 位 移动 画 来 移动 抽 居 页 面 和 原 页 面 了 。 
13.3.10.3 ”动画 移动 抽 居 页 面 


我 们 创建 一 个 属性 动画 吧 。 抽 屠 页 面 从 左边 移出 ， 主 要 动 的 是 X 轴 上 的 属性 ， 首 选 
“translationX”， 它 代表 了 控件 左边 界 deft) 在 X 轴 上 的 位 置 ， 其 初始 值 应 为 负数 ， 这 样 它 
才能 位 于 屏幕 的 左边 ,但 其 初始 值 并 非 “-drawerWidth”， 而 是 “-drawerWidth/2”， 因 为 根据 
QQ 中 的 效果 , 抽 层 页面 并 不 是 从 无 到 有 的 , 而 是 在 开始 移动 时 就 能 看 到 一 半 。 上 有 具体 代码 如 下 : 

// MIA A E PE ESTER n d EE, MENTRE VA JT 

ImageView headlImage = rootView.findViewById (R.id.headImage); 

headlImage.setOnClickListener (new View.OnClickListener() { 


QOverride 


public void onClick(View v) { 
/ / EI & TH R IT 


View drawerLayout = getActivity().getLayoutInflater().inflate( 


R.layout.drawer layout,rootView,false); 
//L TETTE — RIBUS WAP. ARX TÁÓPEEIINUAVS. EFATE a "PIE BIDS dp 
// ENI RHBEIIR X, BILUXA SETRER— T, DLIAVINIIUBESEZHARAE, dp XM 
/ / ITE DB IS II 
int messagelmageWidth = Utils.dip2px(getActivity(),600); 
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// IL HARE IIIS, rootView Æ FrameLayout, 

// FI getWidth() BÜHJ3Cfa E 2 BÍ TER 

int drawerWidth = rootView.getWidth()-messageImageWidth; 
/ / BE TAE T ET HI REIR 

drawerLayout.getLayoutParams().width = drawerWidth; 

// HRR KUA FrameLayout F 
rootView.addView(drawerLayout); 


/ / JFF BT JH] 


final int duration-400; 


// Élé& — ZI, LETHUBE TIVE EE, PER EAEMEIEBHUDK, 

// MBAH V HIE BE Iy-drawerWidth/2, BUE-——JHfTBB-A. 

ObjectAnimator animatorDrawer - ObjectAnimator.ofFloat(drawerLayout, 
"translationX",-drawerWidth/2,0); 

animatorDrawer.setDuration(duration); 

animatorDrawer.start(); 


这 段 代 码 应 放 在 哪里 呢 ? 放 在 onCreateView0 的 最 后 比较 好 ， 当 然 是 在 “return rootView " 
这 句 之 前 。 运 行 App， 登 录 进 入 主页 面 ( 见 图 13.3.10.3.1) ， 点 箭头 所 指 的 头像 图 标 ， 出 现 动 
一， 动画 完成 后 效果 如 图 13.3.10.3.2 所 示 。 


La 


c 


(9 田中 龟 孙 


FEIST. SAFE 
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详细 描述 


e) 标题 


一 ”详细 描述 
or. 


详细 描述 


… ) 标题 
详细 描述 


en) 标题 
详细 描述 


lb 795255 

il na 

NA. 
我 的 收藏 


起 的 相册 


我 的 文件 
标题 
详细 描述 


C) 标题 
详细 措 术 


CX MER 


TREFH 


13.3.10.3.1 图 13.3.10.3.2 
但 原 内 容 并 没有 移动 ， 所 以 那 列 图 像 并 没有 移动 到 右边 去 ， 下 面 考 虑 让 原 内 容 动 起 来 。 
13.3.10.4 动画 移动 原 内 容 
我 们 应 该 为 原 内 容 设置 不 透明 的 背景 色 , 否则 在 移动 过 程 中 会 有 不 可 描述 的 现象 发 生 。 打 
开 文 件 fragment main.xml， 为 内 容 的 根 控件 设置 白色 背景 ， 如 图 13.3.10.4.1、 图 13.3.10.4.2 
所 示 。 
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Component Tree M Attributes 


» O FrameLayout 


layout width match parent 


* Ill LinearLayout (hon2™ layout height match parent 
Fi headimage (nage) > Layout Margin [?, ?, ?, ?, ?] 
^» textView3 - » Padding [?, ?, ?, ?, ?] 
Ab plos 2 » Theme 
'$ viewPager (QQViewPager) elevation 
™ tabLayout background (android:color/white 


ti Tabltem j i vertical 
*3 Tabltem accessibilityLiveRegion 


*3 Tabltem accessibilityTraversalAfter 


13.3.104.1 13.3.10.4.2 


要 在 代码 中 操作 这 个 控件 ， 所 以 要 为 它 设 置 id， 可 以 在 上 图 中 看 到 我 们 把 它 的 控件 设置 
为 “contentLayout” 

在 代码 中 ， 我 们 首先 要 获取 这 个 控件 ， 然 后 为 它 创建 一 个 属性 动画 ， 将 它 从 当前 位 置 〈 束 
是 0， 因 其 left 位 于 X 轴 上 的 0 位置， 这 都 是 相对 于 其 父 控件 来 说 的 ) 移 到 drawerWidth 的 位 
置 ， 这 个 动画 很 好 弄 , 但 是 要 注意 ， ——— 所 以 位 于 原 内 容 的 上 层 ， 这 样 
在 移动 中 抽 屠 页 面 会 盖 住 原 内 容 的 一 部 分 ,但 QQ 中 的 效果 却 不 是 这 样 , 而 是 原 内 容 始 终 可 见 ， 
这 就 需要 将 原 内 容 移 动 到 上 层 来 ， 只 需 调 用 原 内 容 的 根 控件 的 方法 bringToFront0 即 可 。 有 具体 
代码 如 下 : 

/ / SERUR PSOE 


final View contentLayout = rootView.findViewById(R.id.contentLayout); 
// TEETUSIR LE, ZEBE EE -HAWE (Qo BEEXX T ACRO 


contentLayout.bringToFront(); 


// EE XJIBI,. EEAIIRIAS, M 0 HEBDE VELIE IEEE GOEECIAULISAINEO 

ObjectAnimator animatorContent - ObjectAnimator.ofFloat(contentLayout, 
"translationX",O0,drawerWidth); 

animatorContent.setDuration (duration); 

animatorContent.start(); 


现在 可 以 把 原 内 容 移 到 合适 的 位 置 了 , 但 是 这 样 还 有 一 个 问题 , 原 内 容 需 要 在 移动 中 逐渐 
变 暗 ， 这 个 就 需要 蒙 板 效果 了 ， 当 然 蒙 板 效 果 不 是 现成 的 ， 我 们 需要 自己 做 。 欲 知 如 何 实 现 ， 
下 节 分 解 。 

13.3.10.5 ”移动 中 逐渐 变 瞳 


这 个 问题 解决 实现 起 来 稍微 复杂 一 点 。 我 们 可 以 再 为 FrameLayout 创建 一 个 子 控件 ,专门 
做 蒙 板 用 ， 因 为 在 FrameLayout 中 ， 所 以 很 容易 地 把 它 盖 到 原 内 容 控件 的 上 层 。 在 动画 执行 过 
程 中 ， 蒙 板 控 件 还 要 变 得 越 来 越 不 透明 ， 所 以 我 们 再 创建 一 个 动画 对 象 ， 用 于 移动 蒙 板 控件 。 
实际 上 改变 蒙 板 控件 的 透明 度 也 可 以 用 一 个 动画 , 但 对 于 它 我 们 换 一 种 方法 , 因为 总 用 一 种 方 
法 容易 让 人 乏味 ， 我 们 来 点 新 鲜 的 。 我 们 啊 应 动画 对 象 的 更 新 事件 (动画 本 质 上 是 快速 重 画 ， 
每 一 次 重男 就 是 一 次 更 新 ) ,在 啊 应 方法 中 改变 原 蒙 板 的 透明 度 ， 透明 程度 要 与 动画 过 程 对 应 
起 来 , 如 何在 动画 每 次 更 新 时 计算 合适 透明 度 的 值 呢 ? 动画 啊 应 方法 有 一 个 参数 ,这 个 参数 就 
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是 正在 执行 的 动画 对 象 , 通过 动画 对 象 可 以 获取 当前 的 动画 播放 时 间 , 然后 根据 总 时 间 可 以 计 
算出 当前 的 进度 比例 ， 利 用 这 个 比例 就 可 以 计算 出 合适 的 透明 度 。 
创建 蒙 板 的 代码 : 
// &/&& Se fk View 


final View maskView = new View(getContext ()); 
maskView.setBackgroundColor (Color.GRAY); 


/ LU UE AUBIMA E IS yo EHI 
maskView.setAlpha (0); 
rootView.addView (maskView); 


创建 动画 的 代码 如 下 : 


/ / EARR HIZ 
ObjectAnimator animatorMask = ObjectAnimator.ofFloat(maskView, 
"translationX",0,drawerWidth); 


/ / IB hr HE TUB ELDER TE, YETUUP ERES IR R AMARO, MRAZE 
animatorMask.addUpdateListener (new ValueAnimator.AnimatorUpdateListener() { 
/ / AZ ETE TA 
QOverride 
public void onAnimationUpdate (ValueAnimator animation) { 
// IRE DEBERE LU IRL, EURERUL2 ILIRBIX BN AE PIREREZS HER SI— E, 27 127 
float progress = (animation.getCurrentPlayTime ()/(float)duration)/2; 
maskView.setAlpha (progress); 


综合 上 述 功 能 ， 最 终 实现 QQ 抽 屋 效果 的 代码 如 下 : 


/ / BINE A EPIS ER ER br EE, d LE A IT 
ImageView headImage - rootView.findViewById(R.id.headImage); 
headImage.setOnClickListener (new View.OnClickListener() { 
QGOverride 
public void onClick(View v) { 
/ / CUZET W IT 
View drawerLayout = getActivity().getLayoutInflater().inflate( 
R.layout.drawer layout,rootView,false); 
// TETEIE M PGBUBLABIP. AA- EET. ER HIE a P KE HIE dp 
//ER PRERE RK. BEUUAAE EPREE — T, IDIAVINISIBUBEE PRAE, dp X/Av 
/ / POR RO AP IRI 
int messagelmageWidth - Utils.dip2px(getActivity(),60); 
// TETUR VI IIIS, rootView Æ FrameLayout, 
/ / FI getWidth() BIJ Ze E AR HI RE 
int drawerWidth = rootView.getWidth()-messageImageWidth; 
/ / EIE R THI EE 
drawerLayout.getLayoutParams().width = drawerWidth; 
// TITRE I HUIA FrameLayout F 


rootView.addView(drawerLayout); 


// Elie IK View 
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final View maskView = new View(getContext ()); 
maskView.setBackgroundColor (Color.GRAY); 

// URRAUL LET Uy ou Eu HJ 
maskView.setAlpha (0); 

rootView.addView (maskView); 


/ / SIBI AFER [E] 

int duration-400; 

/ / ERR PLE IT TE 

View contentLayout - rootView.findViewById(R.id.contentLayout); 

// TOES LEE, BABE hé -HAE (oo BEAT XCRO 

contentLayout.bringToFront (); 

// BSSER View Ju EIER LEE 

maskView.bringToFront (); 

// EVEZ, BARAR, M 0 WEEZER H RHES GERE AND) 

ObjectAnimator animatorContent = ObjectAnimator.ofFloat(contentLayout, 
"translationX",0,drawerWidth); 


// BARRIZ 
ObjectAnimator animatorMask - ObjectAnimator.ofFloat(maskView, 
"translationX",0,drawerWidth); 


/ / BL EZB HB RAA ETUR DERE IRI EFI ER, MAEM Ei 
animatorMask.addUpdateListener (new 
ValueAnimator.AnimatorUpdateListener() { 
/ / E ET HU E 
QOverride 
public void onAnimationUpdate(ValueAnimator animation) { 
// RARA LU TAI, RITR 2 IIR ITA PALA HEC RE ER ALIE SIE, f 127 
float progress - 
(animation.getCurrentPlayTime()/(float)duration)/2; 
maskView.setAlpha (progress); 


)); 


// EJZ, EMRA, PRECEDERM IEEEHUKUNS, 

// BUE HIE BLIy-drawerWidth/2, WA —FÉfTBBEIA. 

ObjectAnimator animatorDrawer = ObjectAnimator.ofFloat(drawerLayout, 
"translationX",-drawerWidth/2,0); 


// EIE XIII E. I EK AB 
AnimatorSet animatorSet-new AnimatorSet(); 
animatorSet.playTogether (animatorContent,animatorMask,animatorDrawer); 
animatorSet.setDuration (duration); 
animatorSet.start(); 


o 


I 
运行 App， 抽 屠 的 出 现 过 程 已 基本 达到 要 求 ， 动 画 完成 后 的 效果 如 图 13.3.10.5.1 所 示 。 


304 


第 13 章 模仿 QQApp AM 


(9) 田中 鱼 孙 


PERR ER £ py, SR ERN 


0900099 99 9Y| 


图 13.3.10.5.1 


13.3.10.6 PtH ERE 


BUE Bé edu E So BELDE, QQ 中 的 隐藏 束 是 把 显示 的 动画 反 着 来 。 我 
们 也 要 这 样 做 。 同 时 ,不 知 你 是 否 注意 到 ， 当 在 原 内 容 的 那 列 图 像 上 上 下 滑动 时 ， 图像 竟然 能 
跟着 上 下 滚动 ! 这 可 不 是 我 们 期 望 的 。 按 常理 ， 原 内 容 上 面 盖 了 个 蒙 板 控件 ， 触摸 应 被 蒙 板 控 
件 挡住 才 对 ， 怎 么 能 传递 到 下 一 层 View 上 呢 ?” 这 就 是 Android 聪明 的 地 方 。 上 层 View 如 果 
是 半 透 明 的 ， 且 没有 设置 的 触摸 啊 应 侦 听 需 ， 它 就 会 把 触摸 事件 传递 到 下 一 层 View。 上 所 以 要 
改变 这 个 问题 就 容易 了 ， 我 们 只 需要 为 蒙 板 View 设置 侦 听 器 即 可 。 同 时 我 们 要 在 点 击 蒙 板 
View 时 让 抽 屠 消失 ， 上 所 以 也 应 该 为 蒙 板 View 设置 侦 听 器 。 人 代码 很 简单 : 


maskView.setOnClickListener (new View.OnClickListener() i 
QOverride 
public void onClick (View v) { 
// RAK., TIBIA 
} 
)); 


在 onClickQ7;7iXrB, REES TL FH cH) zy BU mI, BU TÉ A A ZE IRA RE. ERMA 
HER, MORDOR, HERI: 


// AAE E BER dr EE, rA IET 
ImageView headImage = rootView.findViewById(R.id.headImage); 
headImage.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
AUI bcd 
final View drawerLayout = getActivity().getLayoutInflater().inflate( 
R.layout.drawer layout,rootView,false); 


/ / BR PEST TE 


final View contentLayout = rootView.findViewById(R.id.contentLayout); 


305 


Android 9 编程 通俗 演义 


/ / EB EF SEHR JE] 


final int duration-400; 


// ETE IR FÄRRE P, AA-AAA SD, EFATE AS P IR BLTAE dp 
/ HERE RÉEBIBE, BEDUSAESEBE— FR. BUS FIUPEREAH ERE, dp XA 
/ / FII DEAS IIKI 

int messagelmageWidth - Utils.dip2px(getActivity(),60); 

// tR MRR E, rootView Æ FrameLayout, 

// HH getWidth () BAHE 25 BEL ER 

final int drawerWidth = rootView.getWidth ()-messageImageWidth; 
// E BETHUBE O ETKI LR 

drawerLayout.getLayoutParams().width = drawerWidth; 

// E TIER T KUIA FrameLayout F 

rootView.addView(drawerLayout); 


// le S f View 
final View maskView = new View(getContext()); 
maskView.setBackgroundColor (Color.GRAY); 
/ / UI EUM AE IE UTE dH] 
maskView.setAlpha (0); 
// 35 d AK View MH. ESL TIE T k 
maskView.setOnClickListener(new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 


// JERAR, VETERA 


// 8I& ZB, BARNE, M 0 WEBS EN RPEN QERGIURST D) 
ObjectAnimator animatorContent = ObjectAnimator.ofFloat( 
contentLayout, 
"translationX", 
drawerWidth,0); 


// ESTER SIBI 
ObjectAnimator animatorMask = ObjectAnimator.ofFloat( 
maskView, 
"translationX", 
drawerWidth,0); 
/ / HAE h RETE, ERFARER GHAR ER, RENE 
animatorMask.addUpdateListener ( 
new ValueAnimator.AnimatorUpdateListener() { 
/ / BIZ ETE LZ AE 
QOverride 
public void onAnimationUpdate (ValueAnimator animation) { 


// TERES BEREREIUDI, BTR 2 HRAB 
// IERE RER ER —F, £59 127 


float progress = 


(animation.getCurrentPlayTime ()/(float)duration); 
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maskView.setAlpha(1-progress); 
) 
)); 


//ül&tz]B, iLALENEDBLHERB.ILEVGBAXBHUKÓ, 
// BFUUBUA BE BE I-drawerWidth/2, BUZE——JÉftTAEB-Ad. 


ObjectAnimator animatorDrawer = ObjectAnimator.ofFloat( 
drawerLayout, 
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"translationX", 
0,-drawerWidth/2); 


// &IEE XIII er, FRI DEDE — IBI 


AnimatorSet animatorSet-new AnimatorSet(); 


animatorSet.playTogether (animatorContent,animatorMask,animatorDrawer); 
animatorSet.setDuration (duration); 


// BEA, ERMi DAKARE 


animatorSet.addListener(new Animator.AnimatorListener()(í 


QOverride 
public void onAnimationStart(Animator animation) { 


} 


QGOverride 

public void onAnimationEnd(Animator animation) { 
// BIBIIA E, RRRA EN BER 
rootView.removeView (maskView); 
rootView.removeView (drawerLayout); 


) 


QOverride 
public void onAnimationCancel (Animator animation) { 


) 


QOverride 
public void onAnimationRepeat(Animator animation) { 


) 
}); 
animatorSet.start(); 
} 
)): 


rootView.addView (maskView); 


// TEES LE, BEEBE -HANE (Qoo BLDEAX T AUR) 
contentLayout.bringToFront(); 

// AHRR View fi SIR LEE 

maskView.bringToFront(); 

// CVE, BARAR, M 0 WEBI VIELES UBI GERIUMSA INE) 


ObjectAnimator animatorContent - ObjectAnimator.ofFloat(contentLayout, 


"translationX",0,drawerWidth); 


// BDR RHIZ) 
ObjectAnimator animatorMask = ObjectAnimator.ofFloat(maskView, 
"translationX",0,drawerWidth); 


/ / EG R AE ARPER R AMARO, MRENE 
animatorMask.addUpdateListener (new 
ValueAnimator.AnimatorUpdateListener() { 
/ / IA ZB ECT HU ZA 
QOverride 
public void onAnimationUpdate (ValueAnimator animation) { 
// tR AAR A, RIAR 2 HERRERIA UIRESEES H EE SII—-E, 27 127 
float progress - 
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(animation.getCurrentPlayTime ()/(float)duration)/2; 
maskView.setAlpha (progress); 
} 
HF 


// Ee ZI, EWER AAE, EE CENE B HRH, 
/ I/M BAW BIEBLIy-drawerWidth/2, MA —#¥t TÆR Iho 
ObjectAnimator animatorDrawer = ObjectAnimator.ofFloat(drawerLayout, 


"LtranslationX",-drawerWidth/2,0); 


// EVEDB, FIR HEC NEL 
AnimatorSet animatorSet-new AnimatorSet(); 

animatorSet.playTogether (animatorContent,animatorMask,animatorDrawer); 
animatorSet.setDuration (duration); 

animatorSet.start(); 


加 粗 的 代码 是 新 添加 的 ,主要 是 啊 应 蒙 板 点 击 事件 。 由 于 在 侦 听 器 类 内 使 用 了 外 部 类 的 一 
些 变量 ， 比 如 “drawerLayout”“maskView” 等 ， 所 以 这 些 变量 都 在 定义 时 加 上 了 “final” 修 
饰 符 ， 有 的 调整 了 一 下 定义 的 位 置 。 到 此 为 止 ， 抽 屋 效 果 宣 告 完成 ! 


13.3.11 创建 “联系 人 ”页 
联系 人 页 面 的 样子 是 这 样 的 (如 图 13.3.11.1 所 示 ) : 


SEHE €. (7 me z- [B es) 13:59 


新 朋友 一 
好 友 — e. WR 


特别 关心 
我 的 好 友 
IRIRAN ~ 冰 妈 


[4G 在 线 ] 冰 妈 


2? 
XE 


牛 老师 sue 
[离线 请 留 言 ] 群众 的 刀子 中 雪 训 的 


朋友 
家 人 


mu 
ce 


图 13.3.11.1 


整个 页 面 〈 红 框 内 所 示 ) 是 可 以 滚动 的 ， 但 比较 牛 的 是 ， 它 并 不 是 按照 一 般 的 方式 滚动 。 
当 问 上 滚动 时 ， 当 箭头 所 指 的 那 一 行 到 顶部 时 ， 这 一 行 不 再 同上 滚动 ， 而 只 是 其 下 的 内 容 会 回 
上 滚 ， 也 就 是 说 盘 头 所 指 的 这 一 行 会 一 直 显 示 。 

这 种 效果 是 怎么 做 出 来 的 呢 ? 基本 上 首先 我 们 能 想到 的 是 有 两 个 能 提供 内 容 滚 动 的 View 
(比如 ScrollView 或 RecyclerView 等 ) ， 一 个 位 于 另 一 个 内 部 ， 当 外 部 View 的 内 容 深 到 一 定 
位 置 时 ， 内 部 View 开始 滚动 。 但 是 这 个 效果 不 是 随意 弄 两 个 滚动 View 束 可 以 实现 的 ， 需 要 
解决 以 下 两 个 问题 : 
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首先 是 触摸 的 问题 。 你 摸 到 的 一 般 是 内 部 滚动 View， 而 不 是 外 部 的 ， 也 就 是 说 内 部 View 
先 收 到 事件 ， 当 它 处 理 完 事件 后 ， 事 件 束 没 了 ， 于 是 外 部 滚动 View 不 会 收 到 触摸 事件 ， 那 么 
你 在 内 部 滚动 View 中 摸 来 摸 去 时 , 只 看 到 内 部 深 动 View 的 内 容 动 , 外 部 滚动 View 的 内 容 是 
不 会 动 的 。 

其 次 是 如 何 让 某 个 位 置 的 View( 和 它 下 面 的 View 们 ) 永远 显示 ， 即 它 深 到 顶 束 不 再 深 
了 。 默 认 的 滚动 实现 都 不 文 持 这 样 的 功能 。 

那 如 何 才 能 解决 这 两 个 问题 呢 ? 其 实 还 真 不 难 ， 只 需要 使 用 几 个 现成 的 View 即 可 。 

要 解决 第 一 个 问题 , 需要 用 到 支持 Nested Scroll RARIK View «VP 3c$ Nested Scroll 
的 控件 才能 配合 起 来 滚动 ,因为 处 于 内 部 的 滚动 View 会 处 理 完 事件 后 把 事件 再 传递 给 外 部 的 
滚动 View。 早 期 出 现 的 ScrollView 和 ListView 都 不 支持 能 套 滚动 ， 而 处 于 support 中 的 支持 
内 容 滚动 的 控件 们 都 支持 Nested Scroll， 比 如 RecyclerView、NestedScrollView 等 ， 我 们 这 里 
正好 要 用 到 这 两 个 控件 ， 外 部 使 用 NestedScrollView， 内 部 使 用 RecyclerView。 但 是 ， 第 二 个 
问题 还 没 解决 , 解决 第 二 个 问题 需要 用 到 一 个 特殊 的 控件 : AppBarLayout。 这 个 控件 看 名 字 似 
乎 是 专用 于 设计 AppBar 的 ， 但 其 实用 于 内 容 中 也 没 问 题 。 它 是 不 支持 滚动 的 ， 但 如 果 把 它 和 
一 个 支持 从 套 滚动 的 View 一 起 放 在 另 一 个 文 持 座 态 滚动 的 View 中 ， 再 进行 一 些 设置 ， 融 能 
最 终 搞 出 我 们 需要 的 效果 。 下 面 我 们 就 一 步 步 搞 出 来 。 

13.3.11.1 添加 联系 人 Layout 资源 


当前 的 联系 人 页 面 是 一 个 RecyclerView， 它 与 消息 页 面 和 动态 页 面 共 同位 于 一 个 
ViewPager 里 面 ， 实 现 了 Tab 翻 页 功能 。 但 是 我 们 下 面 要 改 一 下 联系 人 这 个 页 面 ， 它 不 能 仅 用 
一 个 RecyclerView 了 ， 它 需要 用 复杂 的 Layout， 其 结构 主要 分 成 三 部 分 : 最 外 面 是 一 个 
NestedScrollView， 其 内 包含 一 个 AppBarLayout 和 一 个 RecyclerView，AppBarLayout 在 
RecyclerView 的 上 面 。 效 果 如 图 13.3.11.1.1 所 示 。 


图 13.3.11.1.1 
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下 方 红 框 区 是 RecyclerView， 上 方 绿 框 区 是 AppBarLayout (图 片 颜 色 参 看 下 载 资源 中 相 
关 文 件 ) 。AppBarLayout 中 有 四 行 〈 四 个 第 头 所 指 〉， 顶 端 行 利 用 了 我 们 前 面 创建 的 搜索 行 
layout(message list item search.xml)， 其 下 行 是 一 个 横 癌 的 LinearLayout， 里 面包 含 了 两 个 
TextView， 再 往 下 一 行 仅 用 作 分 割 ， 所 以 只 是 一 个 简单 的 FrameLayout， 最 下 面 是 一 个 
TabLayout。 我 为 这 个 layout 资源 创建 了 文件 contacts page layout.xml， 内 容 如 下 : 


<?xml version-"1.0" encoding="utf-8" ?> 
<android.support.design.widget.CoordinatorLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:paddingLeft-"1lO0dp" 
android:paddingRight-"1l0dp" 
android:paddingTop-"8dp"» 


«android.support.design.widget.AppBarLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:background-"Gandroid:color/background light" 
android:fitsSystemWindows-"false"» 


«include 
layout-"G8Glayout/message list item search" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
app:layout scrollFlags-"scroll" /» 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"40dp" 
app:layout scrollFlags-"scroll"» 


«TextView 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout gravity-"center vertical" 
android:layout weight-"1" 
android:text=" 新 朋友 " /> 


<TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout gravity-"center vertical" 
android:text-"»" /» 


«/LinearLayout» 


«FrameLayout 
android:layout width-"match parent" 
android:layout height-"l0dp" 
android:background-"?attr/colorButtonNormal" 
app:layout scrollFlags-"scroll"» 
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</FrameLayout> 


<android.support.design.widget.TabLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
app:tabMode-"scrollable"» 


«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 好 友 " /> 


«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"ff" /> 


«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Z AWR" /> 


«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"it&" /> 


«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 通 信 录 " /> 


«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 公 众 号 "” /> 

«/android.support.design.widget.TabLayout» 
«/android.support.design.widget.AppBarLayout» 


«android.support.v7.widget.RecyclerView 
android:id-"Q8-c-id/contactListView" 
app:layout behavior-"8string/appbar scrolling view behavior" 
android:layout width-"match parent" 
android:layout height-"match parent" /» 


«/android.support.design.widget.CoordinatorLayout» 


注意 AppBarLayout 中 的 各 View, K I TabLayout 之 外 ， 都 有 一 个 属性 : 
app:layout scrollFlags-"scroll", iXX scroll 表示 这 个 控件 可 以 滚 出 显示 区 ， 而 不 设 的 话 ， 这 
个 控件 就 滚 不 出 显示 区 ，TabLayout 就 没有 设 ， 因 为 要 一 直 采 在 顶部 。 还 要 注意 的 是 
RecyclerView 的 属性 app:layout behavior-"(Qstring/appbar scrolling view behavior" . 在 
CoordinatorLayout 中 ， 设 置 了 这 个 属性 值 的 子 View CT. View 必须 是 可 滚动 的 ) 可 以 与 
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AppBarLayout 相互 配合 ， 完 成 一 些 特殊 的 效果 (当然 也 包括 这 里 要 实现 的 效果 ) 。 
RecyclerView 的 id 被 设置 成 了 contactListView， 因 为 后 面 要 在 代码 中 操作 它 。 
13.3.11.2 ”修改 MainFragment 的 代码 


我 们 原先 为 “消息 ” “联系 人 ”“ 动 态 ” 三 个 页 面 创建 的 都 是 RecyclerView， 现 在 “联系 
人 ”页 面 需要 从 layout 资源 文件 创建 ， 所 以 相关 代码 要 进行 改动 。 
包含 三 个 页 面 的 数组 变量 ， 需 要 改 一 下 : 


// 用 一 个 数组 保存 三 个 RecyclerView 的 实例 


private RecyclerView listViews[] = new RecyclerView[3]; 


/ / Hl — PEE IRE — f view Ep 


private View listViews[] = {null, null, null}; 


创建 三 个 页 面 的 代码 : 


listViews[0]-new RecyclerView (getContext ()); 
listViews[l1]-new RecyclerView (getContext ()); 
listViews[2]-new RecyclerView (getContext ()); 


RecyclerView vl = new RecyclerVievw (getContext ()); 
View v2 = getLayoutInflater().inflate(R.layout.contacts page layout,null); 
som v3 = new RecyclerView(getContext ()); 
/ HN View I BEES ZH IE 
listViews [0] = vl; 
listViews[1] V2; 
listViews[2] = v3; 


单独 创建 3 个 变量 的 原因 是 三 个 页 面 的 类 型 不 再 统一 为 RecyclerView, 后 面 处 理 时 调用 方 
法 也 不 同 了 。 
设置 LayoutManager 的 语句 : 
[LWES RE layout 管理 器 ， 否 则 不 显示 条 目 
LinearLayoutManager layoutManager = new LinearLayoutManager (getContext ()); 
vl.setLayoutManager (layoutManager); 


//listViews[1].setLayoutManager (layoutManager); 
//listViews[2].setLayoutManager (layoutManager); 


// Ilis T RE layout Ei, MEX EH 

vl.setLayoutManager (new LinearLayoutManager (getContext ())); 

RecyclerView recyclerViewInV2 - v2.findViewById(R.id.contactListView); 
recyclerViewInV2.setLayoutManager (new LinearLayoutManager (getContext ())); 
//v3.setLayoutManager(new LinearLayoutManager (getContext())); 
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把 为 了 测试 而 设置 背景 色 的 代码 去 掉 了 。 
设置 RecyclerView 的 适配器 的 语句 : 


// 9 RecyclerView WH Adapter 

listViews[0].setAdapter(new MessagePageListAdapter (getActivity ())); 
listViews[l].setAdapter (new ContactsPageListAdapter (getContext ())); 
//listViews[2].setAdapter(new SpacePageListAdapter()); 


// 7 RecyclerView KH Adapter 

vl.setAdapter (new MessagePageListAdapter (getActivity())); 
recyclerViewInV2.setAdapter (new ContactsPageListAdapter ()); 
//v3.setAdapter(new SpacePageListAdapter()); 


注意 有 个 地 方 最 好 改动 一 下 。 列 表 变 量 listViews 中 的 三 个 View 要 被 viewPager 使 用 ， 
viewPager 的 Adapter 会 在 适当 的 时 候 把 某 个 View 提供 给 viewPager, 所 以 最 好 把 设置 viewPager 
的 Adpater 的 语句 放 到 这 三 个 View 初始 化 完成 之 后 ， 比 如 我 放 到 了 设置 RecyclerView 的 适 配 
句 的 语句 之 后 : 


// ^jRecycLerview i BAdapter 

v1.setAdapter(new MessagePagelListAdapter(getActivity())); 
recyclerviewInv2.setAdapter(new ContactsPagelistAdapter(getContext ())) ; 
//v3.setAdapter(new SpacePageListAdapter( )); 


// XEN i ewPa Iger fi. JgAdapter i7 E Z7 E 

vieuPaper - this.rootView. M Min id.viewPager); 
ern. a setAdapter (new ViewPageAdapter()); 

// J^ Z'TabLayou 7 A Ef 1 

ledit = this.rootview.findviewById(R.id.tabLayout); 
tabLayout.setupWwithviewPager(viewPager); 


App， 现 在 效果 如 图 13.3.11.2.1 所 示 。 


图 13.3.11.2.1 
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可 以 看 到 ， 在 上 下 滚动 时 ，TabLayonut 行 滚 到 最 上 端 后 不 再 往 上 滚 。 

下 面 还 需要 实现 的 是 点 TabLayout 行 上 的 Item 时 切换 页 面 ， 这 个 功能 其 实 与 下 面 的 
TabLayout (消息 、 联 系 人 这 一 行 ) 相似 ， 需 要 改 一 下 文件 contacts page layout.xml， 把 
RecyclerView 变 为 ViewPager， 为 这 个 ViewPager 创建 Adapter， 通 过 Adapter |] ViewPager 返 
回 每 个 页 的 RecyclerView。 但 是 我 们 就 不 搞 这 么 有 碎 烦 了 ， 你 可 以 自己 去 做 一 下 。 我 下 面 想 实现 
的 是 男 一 个 功能 。 

13.3.11.3 ”列表 行 的 “展开 - 收 起 ”功能 


QQApp 中 好 多 页 面 的 列表 控件 都 有 “展开 - 收 起 ”的 功能 ， 比 如 “联系 人 ”页 面 中 的 “好 
友 ” 页 面 ， 如 图 13.3.11.3.1 所 示 。 


新 朋友 


Um B SIWZ B® 好 友 5 ”多 人 聊天 设备 通讯 录 


特别 关心 yc 特别 关心 


13.3.11.3.1 


这 种 列表 控件 看 起 来 像 树 控件 ， 有 的 行 拥有 子 行 。 比 如 “我 的 好 友 ” 这 一 行 ， 点 一 下 左边 
HETA. MERKERS. FAEN I ÍT o 

Android 中 有 没有 能 实现 这 种 效果 的 控件 呢 ? 有 ! ExpandableListView。 但 是 , 它 是 从 陈旧 
的 ListView 派生 的 ， 不 文 持 新 的 滚动 特性 。 为 了 以 后 容易 升级 ， 还 是 文 持 新 特性 比较 好 。 其 
实 我 们 可 以 从 RecyclerView 上 自己 派生 出 一 个 树 控件 ， 当 然 这 是 很 麻烦 的 ， 最 好 的 选择 还 是 使 
用 网 上 已 经 存在 的 第 三 方 控件 , 因为 网 上 充满 了 活 雷 峰 , 为 大 家 提供 了 数 不 清 的 功能 多 样 的 控 
件 ， 当 然 本 人 也 是 其 中 这 一 员 ， 我 已 经 为 大 家 准备 好 了 一 个 树 控件 库 : RecyclerListTreeView， 
其 源码 托管 在 GitHub E (GitHub 是 国外 的 一 个 网 站 ， 供 大 家 免费 存放 代码 ， 也 为 公司 提供 有 
偿 项 目 托 管 ) ， 我 的 项 目的 网 址 是 : https://github.com/niugao/RecyclerListTreeView 。 

RecyclerListTreeView 并 不 是 一 个 View 类 ， 而 是 实现 了 树 控 件 功能 的 几 个 类 的 集合 ， 也 
就 是 一 个 Library (FE) 。 你 可 以 把 这 个 项 目 从 GitHub 上 下 载 下 来 研究 。 下 载 方法 很 简单 ， 进 
入 项 目 主页 ， 点 “Clone or download (元 隆 或 下 载 )”， 如 图 13.3.11.3.2 所 示 。 
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€ 0 releases 44 2 contributors 


Create new file Upload files | Find file Clone or download Y 


Latest compi cees406 3 days ago 


10 days ago 


3 days ago 

7 days ago 

method; 3 days ago 
4 days ago 

4 days ago 

10 days ago 

7 days ago 


10 days ago 


图 13.3.11.32 


出 现 的 页 面 如 图 13.3.11.3.3 所 示 。 


© 0 releases A4 2 contributors 


Create new file ^ Upload files ^ Find file Clone or download ~ 


Clone with HTTPS © Use 55H 
Use Git or checkout with SVN using the web URL. 


https: //github.com/niugao/RecyclerListTree Ea 


Open in Desktop Download ZIP 


13.3.11.3.3 


H “Download ZIP” 下 载 这 个 项 目的 ZIP 包 到 本 地 ， 解 压缩 ， 用 Android Studio 打开 它 就 
行 了 。 这 个 项 目 包 含 了 两 个 Module (模块 )， 如 图 13.3.11.3.4 所 示 。 


* Rapp 
> Ml manti 
> java | 


> Bres 
ii recyclerlisttreeview 
> c manifests 

> M java 

> "res 

© Gradle Scripts 


($ bintray.gradle (Project: RecyclerListTreeView) 


($ build.gradle (Project: RecyclerListTreeView) 
© build.gradle (Module: app) 


图 13.3.11.3.4 
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App 模块 是 一 个 Android App 程序 , 我 们 已 创建 的 Android 工程 只 有 一 个 模块 , 就 是 这 个 。 
recyclerlisttreeview 模块 是 一 个 Android 库 , 就 是 我 们 的 树 控 件 库 。 可 以 看 到 其 下 包含 了 多 种 资 
源 ， 与 一 个 App 无 异 ， 但 是 它 是 不 能 独立 运行 的 ， 它 只 能 被 其 他 App 所 调用 。 这 个 库 中 有 三 
个 Java 类 ， 如 图 13.3.11.3.5 所 示 。 


| il ycie 
» o manifests 
” 5 java 
* B com.niuedu 
s ListTree 
€ * ListTreeAdapter 
€ * ListTreeViewHolder 
v "res 


2 drawable 


layout 


: values 
13.3.11.3.5 


里 面 并 没有 从 View 派生 的 类 ,利用 这 个 库 显 示 树 控件 时 其 实 依然 需要 使 用 RecyclerView, 
回忆 一 下 使 用 RecyclerView 的 基本 思路 是 什么 : 需要 有 存放 数据 的 集合 (比如 ArrayList) , 
需要 派生 一 个 Adapter 类 来 关联 RecyclerView 和 数据 。 这 里 的 ListTree 就 是 存放 数据 的 集合 ， 
只 不 过 它 是 按 树 的 方式 管理 其 所 包含 的 项 ; ListTreeAdapter 是 从 RecyclerView.Adapter 派生 的 
一 个 类 ， 用 于 将 ListTree 与 RecyclerView 3t fr X HX . ListIreeViewHolder ， 与 
RecyclerView.ViewHoler 的 作用 没有 两 样 。 

这 个 库 号 称 是 最 快 的 Andriod 树 控 件 库 〈 我 自己 封 的 ) ， 虽 然 有 些 压 张 ， 但 也 是 有 一 定 根 
据 的 。 因 为 这 个 库 的 特点 是 以 List 实现 了 Tree, ListTree 中 管理 数据 依然 使 用 的 是 List 类 ， 由 
于 RecyclerView 要 求 其 后 台数 据 集合 必须 能 根据 序号 来 提供 数据 〈 即 有 序 的 ) ， 所 以 底层 的 
List 保证 了 ListTree 与 RecyclerView 的 无 颖 结合 , 同时 也 避免 了 树 结 构 处 理 中 的 令 人 讨厌 的 递 
归 算 法 问题 。 这 个 库 还 有 一 个 特点 ， 就 是 保留 了 使 用 RecyclerView 过 程 的 原 汁 原味， 熟悉 
RecyclerView 的 用 法 的 话 ， 使 用 这 个 库 是 很 轻松 的 。 

当然 这 是 一 个 真正 的 树 ， 它 能 显示 的 层级 不 仅 是 两 级 ， 只 要 你 的 屏幕 够 宽 ， 你 想 显 示 多 少 
级 都 行 。 这 个 库 的 使 用 方法 在 App 模块 中 有 示例 。 

下 面 我 就 用 它 来 把 QQ 的 联系 人 界面 实现 出 来 。 


13.3.11.4 创建 不 同行 的 layout 资源 


联系 人 界面 中 显示 的 行 有 两 种 ,一 种 是 组 , 一 种 是 联系 人 ， 它 们 的 layout 不 同 ， 所 以 我 们 
要 先 创 建 两 个 layout 资源 文件 。 

添加 两 个 layout 资源 ， 一 个 叫 contacts contact item.xml， 对 应 联系 人 ; 一 个 叫 
contacts group item.xml， 对 应 组 。contacts_contact item.xml 的 源码 是 : 
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android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
android:paddingBottom-"4dp" 
android:paddingTop-"4dp"» 


«ImageView 
android:id-"c*id/imageViewHead" 
android:layout width-"40dp" 
android:layout height-"40dp" 
android:layout marginRight-"10dp" /> 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:orientation-"vertical"» 


«TextView 
android:id-"Qcid/textViewTitle" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:text-"Title" 
android:textSize-"18sp" /> 


«TextView 
android:id-"Q8-c-id/textViewDetail" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:text-"Detail" 
android:textSize-"l4sp" /> 

«/LinearLayout» 


«/LinearLayout» 


contacts group item.xml 的 源码 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
android:layout width-"match parent" 
android:layout height-"40dp" 
android:gravity-"center vertical"» 


«TextView 
android:id-"Q4id/textViewTitle" 


android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout weight-"1" 
android:text-"TextView" 
android:textSize-"18sp" /» 


«TextView 
android:id-"(c-id/textViewCount" 
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android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"l0dp" 


android:text-"0" 
android:textSize-"18sp" /» 
«/LinearLayout» 


13.3.11.5 ”添加 保存 行 数据 的 类 
如 果 一 行 中 显示 的 数据 比较 复杂 ， 我 们 应 该 定义 一 个 类 来 保存 其 数据 。 组 行 显示 如 图 


13.3.11.5.1 所 示 。 
我 的 好 友 


13.3.11.5.1 


看 起 挺 复杂 ， 但 其 实 真正 需要 使 用 者 提供 的 数据 就 是 一 个 标题 “我 的 好 友 ”) ， 其 余 的 
从 ListTree 中 就 可 以 获取 到 。 最 左边 的 “ 收 起 /展开 ”图 标 是 内 置 的 ， 虽 然 可 以 定制 ， 但 你 一 
般 不 需要 动 它 。 最 右边 的 “1/2” 表 示 “ 在 线 好 友 数 /总 好 友 数 ”， 总 好 友 数 实际 上 就 是 这 个 行 
的 子 行 数 ， 这 个 可 以 从 TreeList 中 取出 来 。 所 以 对 于 组 ， 我 们 的 类 只 需 包含 两 个 字段 即 可 。 这 
个 类 放 在 哪里 昵 ? 放 在 Adapter 类 中 是 比较 合适 的 。 在 ContactsPageListAdapter 中 添加 
GroupInfo 类 ， 代 码 如 下 : 
static public class GroupInfo( 


private String title; //Z47/4£/ 
private int onlineCount; // HAPE HIA Z 


public GroupInfo (String title, int onlineCount) { 
this.title - title; 
this.onlineCount - onlineCount; 


) 


public String getTitle() { 
return title; 


) 


public int getOnlineCount() { 
return onlineCount; 


) 


子 行 如 图 13.3.11.5.2 所 示 。 


图 13.3.11.5.2 
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子 行 中 的 数据 要 更 多 一 点 ， 有 三 项 : 头像 、 名 字 和 状态 。 创 建 子 行 〈 即 联系 人 ) 数据 类 作 
为 Adapater 的 内 部 类 : 


/ / FERRERA TR 

static public class ContactInfo[( 
private Bitmap avatar; //J./$ 
private String name; //4 Z 
private String status; //J/í4& 


public ContactInfo(Bitmap avatar, String name, String status) { 
this.avatar - avatar; 
this.name - name; 
this.status = status; 


) 


public Bitmap getAvatar() ( 
return avatar; 


) 


public String getName() { 
return name; 


) 


public String getStatus() { 
return status; 


) 


这 两 个 类 作为 Adapter 类 的 内 部 类 比较 好 ， 所 以 我 把 它 放 在 ContactsPageListAdapter 中 ， 
但 是 我 们 要 先 对 ContactsPageListAdapter 进行 一 下 改造 ， 请 看 下 节 。 


13.3.11.6 ”使 用 RecyclerListTreeView Æ 
下 面 我 们 就 利用 RecyclerListView 来 实现 “联系 人 ”页 面 的 双 层 树 结构 。 首 先 要 添加 对 
RecyclerListView 库 的 依赖 ， 打 开 App 模块 的 Gradle 配置 文件 ， 如 图 13.3.11.6.1 所 示 。 


* ($ Gradle Scripts 
($ build.gradle (Project: QQApp) 
© build.gradle (Module: app) 
"i TS radle Ver 
= proguard-rules.pro (ProGNard Rules fo 


»1gradle.properties (Project Properties) 


($ settings.gradle (Project Settings) 


ul local.properties (SDK Location) 
13.3.11.6.1 


找到 “dependencies{” 这 个 位 置 ， 在 其 中 添加 如 图 13.3.11.6.2 所 示 的 信息 。 
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dependencies { 
compile fileTree(include: ['*.jar'], dir: 'libs'") 
androidrestcompile('com.android.support.test.espresso:espresso-co 
exclude group: 'com.android.support', module: 'support-annotez 


}) 
compile 'com.android.support:appcompat-v7:26.+' 
compile 'com.android.support.constraint:constraint-layout:1.0.2' 


compile “com.android.support:support-v4:26.+" 
compile 'com.android.support:cardview-v7:26.+' 
compile 'com.android.support:recyclerview-v7:26.+' 
compile 'com.android.support:design:26.+' 

compile 'com.niuedu:recyclerlisttreeview:0.1.0' 
testCompile 'junit:junit:4.12' 


13.3.11.6.2 


在 其 中 添加 依赖 项 : implementation 'com.edu:Trecyclerlisttreeview:0.1.4'， 再 构建 一 下 工程 ， 
就 可 以 使 用 这 个 库 了 。 
先 把 ContactsPageListAdapter 中 现 有 的 代码 都 删 掉 ， 变 成 这 样 : 


public class ContactsPageListAdapter extends 
ListTreeAdapter«cListTreeViewHolder» { 


static public class GroupInfo[ 
private String title; //ZZ7fy&8 
private int onlineCount; //J/////4 tft A2 


public GroupInfo(String title, int onlineCount) { 
this.title = title; 
this.onlineCount = onlineCount; 


public String getTitle() { 
return title; 


public int getOnlineCount() { 
return onlineCount; 


/ I EU A 2E 
static public class ContactInfo[í 


private Bitmap avatar; //-J/$ 


private String name; //4- 
private String status; //J4J/4&5 


public ContactInfo(Bitmap avatar, String name, String status) 
this.avatar - avatar; 
this.name - name; 
this.status = status; 
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public Bitmap getAvatar() { 
return avatar; 


public String getName() { 
return name; 


public String getStatus() { 
return status; 


public ContactsPageListAdapter(ListTree tree) { 
super (tree); 


public ContactsPageListAdapter(ListTree tree,Bitmap expandIcon,Bitmap 
collapseIcon) í( 


super (tree,expandIcon,collapseIcon); 


QOverride 


protected ListTreeViewHolder onCreateNodeView(ViewGroup parent, int 
viewType) { 


return null; 


QOverride 


protected void onBindNodeViewHolder(ListTreeViewHolder viewHoler, 
position) { 


) 


int 


//É] ViewHolder 
class GroupViewHolder extends ListTreeViewHolder(í 


public GroupViewHolder (View itemView) { 
super (itemView); 


//ÁÉF K ViewHolder 
class ContactViewHolder extends ListTreeViewHolder(í 
public ContactViewHolder (View itemView) { 
super (itemView); 
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注意 它 必 须 从 RecyclerListTreeView 库 中 提供 的 ListTreeAdapter 类 派生 。 还 要 注意 
ViewHolder 类 也 必须 从 ListTreeViewHoler 派生 , 我 们 派生 了 两 个 ViewHolder 类 , 因为 有 两 种 
ff layout 嘛 。 再 要 注意 范 型 参数 : “ListTreeAdapter<ListTreeViewHolder> ”， 我 传 的 是 
ListTreeAdapter 中 的 ListTreeViewHolder 类 ， 而 不 是 目 己 派生 的 ViewHoler 类 ， 因 为 派生 了 两 
个 ViewHolder， 传 入 哪个 都 不 合适 ， 所 以 我 直接 使 用 基 类 。 

335^ EEX RecyclerListTreeView 提供 了 两 个 构造 方法 : 


public ListTreeAdapter (ListTree 七 Tee) { 
this.tree-tree; 


} 
public ListTreeAdapter(ListTree tree,Bitmap expandIcon,Bitmap collapseIcon) { 


this.tree-tree; 


this.expandIcon-expandIcon; 
this.collapselcon-collapseIcon; 


第 一 个 只 有 一 个 参数 “ListTree tree”， 通 过 它 可 以 传 入 外 部 创建 的 数据 集合 男 一 个 有 
三 个 参数 ， 除 了 传 入 数据 集合 外 ， 还 可 以 传 入 两 个 位 图 ， 用 于 定制 “展开 / 收 起 ”图 标 。 

下 面 我 们 创建 数据 集合 对 象 : “ListTree tree=new ListTree()”。 但 是 ， 这 个 变量 放 在 哪里 
呢 ? 可 以 放 在 承载 “联系 人 ”这 个 页 面 的 类 MainFragment "P, 但 是 MainFragment 有 太 多 的 子 
页 面 ， 每 个 子 页 面 的 数据 都 由 MainFragment 管理 的 话 太 乱 了 ， 难 以 维护 ， 让 子 页 面 自己 管理 
才 比 较 好 ， 我 图 省 事 ， 直 接 把 它 放 在 了 ContactsPageListAdapter 中 。 

比 RecyclerView.Adapter 还 要 简单 ，ListTreeAdapter 的 子 类 只 需要 实现 两 个 方法 就 能 i 
RecyclerView 显示 数据 ， 一 是 : “onCreateNodeView()”， 它 对 应 RecyclerView.Adapter 的 
onCreateViewHolder0 方 法 ， 在 创建 一 行 的 控件 时 被 调用 ， 在 其 中 做 的 事情 也 一 样 。 另 一 个 是 

“onBindNodeViewHolder()”， 它 对 应 onCreateViewHolder0 方 法 ， 其 内 所 做 的 事情 也 没什么 
不 同 。 至 于 另 一 个 需要 实现 方法 getItemCountO0， 已 经 不 允许 你 动 了 。 

所 以 这 个 库 还 是 极 易 上 手 的 。 

13.3.11.7 在 ViewHolder 类 中 hold 住 控 件 

我 们 再 为 ViewHolder 类 添加 变量 以 保存 行 中 要 操作 的 控件 ， 代 码 如 下 : 


// fl ViewHolder 

class GroupViewHolder extends ListTreeViewHolder([( 
TextView textViewTitle; //JZ zB 
TextView textViewCount; // BIPA% / ERM Hof 


public GroupViewHolder (View itemView) { 
super (itemView); 
textViewTitle = itemView.findViewById(R.id.textViewTitle); 
textViewCount = itemView.findViewById(R.id.textViewCount); 
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//Áf K ViewHolder 

class ContactViewHolder extends ListTreeViewHolderí 
ImageView imageViewHead; //J4Z gv ÉD IL 
TextView textViewTitle; //JZg fL AID 
TextView textViewDetail; //4Zz 4 f d f 


public ContactViewHolder (View itemView) { 
super (itemView); 


imageViewHead = itemView.findViewById (R.id.imageViewHead); 
textViewTitle itemView.findViewById(R.id.textViewTitle); 
textViewDetail = itemView.findViewById(R.id.textViewDetail); 


13.3.11.8 ”创建 数据 集合 : ListTree 


RecyclerView 中 要 显示 的 树 形 数据 必须 放 在 ListTree 中 。 

ListTree 绝对 是 树 ， 只 不 过 它 的 内 部 使 用 List 保存 树 的 节点 ， 但 兄弟 节点 之 间 是 有 序 的 ， 
是 按照 添加 的 顺序 排列 ， 而 且 儿 子 必然 是 放 在 苑 区 的 后 面 ， 其实 就 是 与 “联系 人 ”界面 中 组 展 
开 后 看 到 的 样子 一 模 一 样 。 你 可 以 想像 成 一 个 节点 既 在 树 中 也 在 List 中 , 所 以 ListTree 提供 了 
节点 在 树 中 位 置 与 List 中 位 置 的 映射 方法 。 从 List 中 的 某 个 位 置 获取 对 应 节点 : 


TreeNode getNodeByPlaneIndex (int index). 


注意 TreeNode 表示 一 个 节点 。 
获取 一 个 节点 在 List 中 的 位 置 : 


int getNodePlaneIndex(TreeNode node) 


根据 一 个 节点 在 其 父 节点 中 的 位 置 ， 获 取 其 在 List 中 的 位 置 : 
int getNodePlaneIndexByIndex(TreeNode parent, int index) 


其 实 你 已 经 看 到 了 ，“plane index" KR List 中 的 位 置 ， 因 为 RecyclerView 易 与 列表 或 数 
组 结合 ， 所 以 有 了 plane index 就 很 容易 把 一 个 节点 对 应 到 某 一 行 上 ， 当 然 这 是 内 部 实现 ， 使 
用 者 可 以 不 管 它 如 何 实现 。 

下 面 我 们 创建 一 棵 树 并 添加 节点 ， 构 建 出 QQ“ 联 系 人 ”页 面 的 数据 集合 。 我 们 在 
MainFragment 中 添加 一 个 私有 方法 ， 专 门 用 于 创建 联系 人 页 面 并 初始 化 它 的 内 容 : 


// CEHA URRAK, 1NR ET 


private View createContactsPage(){ 
// Él/£& View 
View v = getLayoutInflater().inflate(R.layout.contacts page layout,null); 


// &l& SE (ERP) 

ListTree tree - new ListTree(); 

/ / PAIRS TTA en 

// EVE, IDA TE. ENIWNK Hy null 
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ContactsPageListAdapter.GroupInfo groupl-new 
ContactsPageListAdapter.GroupInfo( "特别 关心 " Us 
ContactsPageListAdapter.GroupInfo group2-new 
ContactsPageListAdapter.GroupInfo (" 我 的 好 友 " ,1) ; 
ContactsPageListAdapter.GroupInfo group3-new 
ContactsPageListAdapter.GroupInfo ("朋友 ", 0); 
ContactsPageListAdapter.GroupInfo group4-new 
ContactsPageListAdapter.GroupInfo ("ZKAÀ",0); 
ContactsPageListAdapter.GroupInfo groupb-new 
ContactsPageListAdapter.GroupInfo (" 同 学 ",0) ; 


ListTree.TreeNode groupNodel-tree.addNode (null,groupl, 
R.layout.contacts group item); 

ListTree.TreeNode groupNode2-tree.addNode (null,group2, 
R.layout.contacts group item); 

ListTree.TreeNode groupNode3-tree.addNode (null,group3, 
R.layout.contacts group item); 

ListTree.TreeNode groupNode4-tree.addNode (null,group4, 
R.layout.contacts group item); 

ListTree.TreeNode groupNode5-tree.addNode (null,group5, 
R.layout.contacts group item); 


// BILE, BRAE 
//X fR 
Bitmap bitmap- BitmapFactory.decodeResource(getResources(), 
R.drawable.contacts normal); 
// ERA 1 
ContactsPageListAdapter.ContactInfo contactl - new 
ContactsPageListAdapter.ContactInfo( 
bitmap, " 王 二 ", " [在 线 ] 我 是 王 二 "); 
// X1 
bitmap - BitmapFactory.decodeResource(getResources(), 
R.drawable.contacts normal); 
// ERA 2 
ContactsPageListAdapter.ContactInfo contact2-new 
ContactsPageListAdapter.ContactInfo( 
bitmap, "£=", " [离线 ] 我 没有 状态 ") ; 
/ / SAPE IERLA 
tree.addNode (groupNode2,contactl,R.layout.contacts contact item); 
tree.addNode (groupNode2,contact2,R.layout.contacts contact item); 


// XA Ji lli I RecyclerView, /y£É/& Adapter 

RecyclerView recyclerView = v.findViewById(R.id.contactListView); 
recyclerView.setLayoutManager (new LinearLayoutManager (getContext ())); 
recyclerView.setAdapter (new ContactsPageListAdapter (tree)); 


return v; 


注意 ，TreeNode 对 象 不 能 通过 构造 方法 创建 ， 只 能 通过 ListTree.addNode() 77 1: &] ££ . 
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addNode0 的 第 一 个 参数 是 父 节 点 ， 没 有 的 话 就 传 入 null， 第 二 个 参数 是 节点 的 数据 ， 即 每 一 
行 要 显示 的 数据 。 第 三 个 参数 是 这 一 行 的 layout 资源 id. 
如 此 一 来 ， 原 来 在 MainFragment 的 onCreateViewO 中 相关 的 代码 就 要 去 掉 了 (被 框 出 的 


// J= fRecyclerview, ZH vog EL. QRA A 
RecyclerView v1 - new RecyclerView(getContext()); 
View v2 = getiayoutinflater().inflate(R.layout.contacts page Layout, root: null) 
RecyclerView v3 - new RecyclerView(getContext()); 


[14 — fiewiE AIRA 
listviews[9] = v1; 

listviews[1] 
listViews [2] 


v2; 
v3; 


// BILE rie Elayout Elik, PWT Enz A 
v1.setLayoutManager(new LinearlayoutManager(getContext())); 
Recyclerview recyclerviewInv2 = v2.findviewById(R.id.contactListVview); 
recyclerViewInV2.setlayoutManager(new LinearLayoutManager(getContext 


//v3.setLayoutManager(new LinearLayoutManager(getcontext( ) )); 


// "jRecyclLerView H EAdaptei 
v1.setAdapter(new MessagePageListAdapter(getActivity())); 


[recyclerViewInV2.setAdapter(new ContactsPagelistAdapter( tree: nu11)); 


//V3.setAdapter(new SpacePageListAdapter( )); 


创建 v2 的 代码 改 为 〈 被 框 出 的 是 修改 后 的 代码 ) : 


// Éláf - RecycLerview. Z^ vog uu. QQAUAÁ "V. QQ Tu UD 
RecyclerView v1 = new RecyclerView(getContext : 


View v2 - createContactsPage(); 
RecyclerView v3 - new RecyclerView(getContext()); 


我 把 创建 整个 页 面 的 代码 封装 到 了 一 个 单独 的 方法 createContactPage0 中 了 。 
13.3.11.9 ”实现 onCreateNodeView() 方 法 


数据 准备 好 了 ， 下 面 实现 Adapter 中 的 方法 把 数据 与 RecyclerView 关联 起 来 。 先 实现 
onCreateNodeView0 方 法 ， 很 显然 这 个 方法 是 在 RecyclerView 要 创建 一 行 的 View 时 被 调用 : 


QOverride 
protected ListTreeViewHolder onCreateNodeView (ViewGroup parent, int viewType) 
{ 

// FRAM Layout Él/£ View PIXI R 

LayoutInflater inflater - LayoutInflater.from(parent.getContext ()); 

/ / Él& ^ Hfr View 

if(viewType-- R.layout.contacts group item) { 

// Xue VERBAN true 


View view = inflater.inflate (viewType, parent, true); 


return new GroupViewHolder (view); 

Jelse if(viewType == R.layout.contacts contact item)( 
View view = inflater.inflate(viewType,parent,true); 
return new ContactViewHolder (view); 


return null; 
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看 看 代码 ， 跟 RecyclerView 原生 用 法 没 区 别 。 
13.3.11.10 ”实现 onBindNodeViewHolder()737X 


QOverride 
protected void onBindNodeViewHolder (ListTreeViewHolder viewHoler, int position) 
i 

// BRITIEM 

View view = viewHoler.itemView; 

/ / XA X ITZ PI PUR EE BA 

ListTree.TreeNode node - tree.getNodeByPlaneIndex (position); 


if(node.getLayoutResId() == R.layout.contacts group item){ 


//group node 

GroupInfo info - (GroupInfo)node.getData(); 
GroupViewHolder gvh= (GroupViewHolder) viewHoler; 
gvh.textViewTitle.setText(info.getTitle()); 


gvh.textViewCount.setText (info.getOnlineCount () *"/"4node.getChildrenCount()) 
Jelse if(node.getLayoutResId() == R.layout.contacts contact item){ 
//child node 


ContactInfo info - (ContactInfo) node.getData(); 


ContactViewHolder cvh- (ContactViewHolder) viewHoler; 
cvh.imageViewHead.setImageBitmap (info.getAvatar()); 
cvh.textViewTitle.setText (info.getName ()); 
cvh.textViewDetail.setText(info.getStatus()); 


根据 行 的 序号 获取 节点 用 方法 getNodeByPlaneIndex0， 这 个 前 面 解释 过 了 。 应 该 注意 的 就 
是 获取 行 要 显示 的 数据 ， 调 用 TreeNode 的 方法 getData0， 你 还 需要 把 返回 的 对 象 转 成 真正 的 

完成 ， 收 功 。 

13.3.11.11 FEMI AE 

下 拉 刷 新 的 效果 如 图 13.3.11.11.1、 图 13.3.11.11.2、 图 13.3.11.11.3 所 示 。 


全 [n 200] 


释放 立即 刷新 


我 的 电脑 
你 已 在 电脑 登录 ， 可 传 文件 到 电脑 。 


我 的 电脑 
你 已 在 电脑 登录 ， 可 传 文件 到 电脑 。 


13.3.11.11.1 图 13.3.11.11.2 
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网 上 有 很 多 实现 了 下 拉 刷 新 Android 控件 ， 去 Github 上 搜 “pullrefresh”， 然 后 选择 Java, A 
图 为 证 (图 13.3.11.11.4) 。 而 且 很 多 都 是 国人 提供 的 ， 使 用 指南 都 是 中 文 的 ， 所 以 我 也 不 再 去 演 
示 如 何 使 用 其 中 某 个 ， 我 其 实 想 演示 的 是 Android 官方 提供 的 控件 : SwipeRefreshLayout， 它 在 
support 库 中 ,其 全 名 为 “android.support.v4.widget.SwipeRefreshLayout”。 但 是 它 的 效果 与 QQApp 
中 的 效果 不 一 样 ， 下 面 简 要 讲 一 下 如 何 使 用 它 。 


( ) pulirefresh 


| Repositories 40 repository results 


Code 
Commits P 7heaven/PullRefresh 
IOS-style PullRefresh 


Updated on 9 Mar 2015 


dalong982242260/PullRefresh 


Tr. 


Haa ER. SFSR, RES pE 


Updated on 24 Nov 2016 


我 的 电脑 | 
你 已 在 电脑 登录 ， 可 传 文件 到 申 脑 。 Objective- ~ qzsang/PullRefresh 
Swi za T BSmRecyclerview Fma, fr 
Recy cler V ie W [ 71 EllListV Iew 下 拉 届 新 的 效 尝 。 


13.3.11.11.3 13.3.11.11.4 


它 的 原理 很 简单 ， 它 是 一 个 Layout， 它 只 能 有 一 个 儿子 ， 想 让 谁 有 下 拉 刷 新 效果 ， 束 让 
谁 给 它 当 儿 子 就 行 了 。 我 们 现在 需要 为 MainFragment 中 的 三 个 子 页 面 都 提供 下 拉 刷 新 效果 ， 
所 以 我 们 应 该 直接 把 这 三 个 子 页 面 的 容器 viewPager 放 在 SwipeRefreshLayout 中 。 修 改 前 代码 : 
cr ENlÁIX-- 
«niuedu.com.qqapp.QOQViewPager 
android:id-"Q-c*id/viewPager" 
android:layout width-"match parent" 
android:layout height-"Odp" 
android:layout weight-"1"/» 


修改 之 后 ， 变 为 这 样 : 


«android.support.v4.widget.SwipeRefreshLayout 


android:layout width-"match parent" 

android:layout height-"Odp" 

android:layout weight-"1"» 

<!-- €ENIWESi--» 

«niuedu.com.qqapp.QOQViewPager 
android:id-"Q-cid/viewPager" 
android:layout width-"match parent" 
android:layout height-"match parent" /» 


«/android.support.v4.widget.SwipeRefreshLayout» 


运行 效果 如 图 13.3.11.11.5 所 示 。 
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会 [nme 20:38 


标题 
详细 描述 
标题 
详细 摊 述 
标题 
详细 描述 


13.3.11.11.5 


下 拉 时 ， 出 现 一 个 有 旋转 动画 的 球形 UFO。 但 是 ， 你 会 发 现 这 个 UFO 不 自动 消失 ， 为 什 
么 会 这 样 呢 ? 因为 什么 时 候 消 失 必 须 由 你 来 决定 。 这 个 UFO 消失 了 ， 表 示 刷 新 完成 了 ， 或 成 
功 或 失败 ， 反 正 是 完成 了 ， 所 以 我 们 要 在 UFO 显示 出 来 之 后 开始 数据 刷新 操作 ， 在 刷新 完成 
后 调用 SwipeRefreshLayout 的 某 个 方法 ， 隐 藏 UFO。 

要 操作 SwipeRefreshLayout 控件 ， 必 须 有 id, WERE id: refreshLayout。 必 须 响 应 它 刷 
新 事件 ， 开 始 执行 刷新 数据 的 操作 。 代 码 如 下 : 

/ / Bahii tE 


final SwipeRefreshLayout 
refreshLayout-rootView.findViewById (R.id.refreshLayout); 
// BI E A HI E 
refreshLayout.setOnRefreshListener (new SwipeRefreshLayout.OnRefreshListener () 
{ 
QOverride 
public void onRefresh() { 
/ IA TT BVBEECIBBITCE E TE, PLR EFEN HIRERE IINA, BEDS SE 
/1 FRAI HIRIE. 


/ LB, KRIK UFO 


refreshLayout.setRefreshing(false); 


此 时 再 运行 App， 下 拉 ， 显 示 UFO， 但 很 快 就 消失 了 ， 这 是 因为 我 们 直接 在 onRefresh() 
中 调用 了 setRefreshing(false)， 这 大 多 数 情况 下 是 不 对 的 ， 应 该 在 刷新 数据 的 线程 中 异步 调用 
此 方法 ， 多 线程 与 异步 调用 ， 后 面 讲 网 络 通信 时 再 讲 ， 这 里 主要 是 演示 刷新 控件 的 用 法 。 


13.3.12 创建 “动态 ”页 
“动态 ”页 是 这 样 的 〈 如 图 13.3.12.1 所 示 ) : 
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* 


© 
© 


E 


e 9 


图 13.3.12.1 
限于 篇 幅 ， 不 再 实现 这 个 页 面 ,我 讲 一 下 设计 思想 ， 大 家 可 自行 实现 。 这 个 页 面 看 起 来 也 
是 一 个 列表 ， 但 实际 上 由 于 其 内 容 是 静态 的 ， 用 列表 反而 有 麻烦。 最 简单 的 办 法 是 用 ScollView 
(或 NestedScrollView) ， 每 一 行 都 用 CardView 作 最 外 层 控 件 ， 这 样 可 以 随意 定制 行 间 的 间 
隅 效果 。 


13.3.13 ”实现 搜索 功能 

搜索 功能 在 App 中 绝对 是 一 个 常见 功能 。QQApp 实现 了 实时 搜索 功能 。 我 们 先 看 一 下 它 
的 运行 方式 。 在 搜索 控件 上 点 一 下 (图 13.3.13.1 所 示 。 还 记得 前 面 讲 过 的 吗 ?这 个 搜索 控件 是 
假 的 ， 仅 用 于 接受 点 击 事件 ) ， 进 入 搜索 页 面 ( 图 13.3.13.2 所 示 ) 。 


Ass E 


& X 


X4 ”动态 


ò Aug 


EEUU A B st 黄 教 清 
3 卖 女 儿 打 赏 女 主 播 s 用 丑 照 吓 跑 对 象 
5 汪东城 公开 恋情 5 震惊 全 国 的 假 药 案 


图 13.3.13.1 图 13.3.13.2 


这 个 页 面 的 搜索 控件 才 是 真正 的 搜索 控件 (SearchView) ， 点 它 一 下 ， 出 现 软 键盘 ， 可 以 
输入 要 搜索 的 字符 串 。 在 输 的 过 程 中 ， 会 实时 显示 出 当前 字符 串 的 搜索 结果 ， 如 图 13.3.13.3 
Bran 
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Ag Co Dracon 
| LYG-DRAGON! q 


图 13.3.13.3 

下 面 我 就 讲 一 下 搜索 功能 的 实现 过 程 。 

13.3.13.1 创建 搜索 页 面 

先 理 一 下 思路 :我 们 需要 啊 应 假 搜索 控件 的 点 击 事件 , 显示 一 个 新 的 Activity, 这 个 Activity 
就 是 执行 搜索 的 界面 ， 它 里 面 有 一 个 SearchView 控件 ， 下 面 需 被 一 个 列表 控件 占据 ， 这 样 当 
在 SearchView 中 进行 搜索 时 ， 可 在 列表 控件 中 显示 结果 。 

所 以 我 们 首先 创建 一 个 搜索 页 面 。 这 个 页 面 可 以 是 一 个 Fragment, 也 可 以 是 一 个 Activity， 
但 我 们 最 好 使 用 Activity， 因 为 根据 QQApp 的 效果 ， 新 页 面 是 全 面 才 闸 旧 页 面 的 ， 根 据 经 验 ， 
这 种 情况 用 Acitivity 更 好 一 些 ， 当 然 用 Fragment 也 完全 没 问题 。 

使 用 向 导 创 建 一 个 Activity， 类 名 SearchActivity， 需 选择 的 项 如 图 13.3.13.1.1 所 示 。 


Creates a new empty activity 


Activity Name 


SearchActivity 


Generate «a 


Layout Name 


activity search 


D Launcher Activity 


Backwards Compatibility -— 


The name of the activity class to create 


图 13.3.13.1.1 
修改 它 的 layout 资源 文件 activity search.xml, Weil JE f: 


<?xml version-"1.0" encoding-"urtf-8"?» 
«android.support.constraint.ConstraintLayout 


xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
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android:layout width=" match parent" 
android:layout height= "match parent" 
tools:context-"niuedu.com.qqapp.SearchActivity"» 


«SearchView 
android:id="@+id/searchView" 
android:layout_width="0dp" 
android:layout height-"wrap content" 
android:layout marginEnd-"8dp" 


android:layout marginStart-"8dp" 

android:layout marginTop-"8dp" 

app:layout constraintEnd toStartof="@+id/tvCancel" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 


«TextView 
android:id-"Q«id/tvCancel" 
android:layout width-"wrap content" 
android:layout height-"Odp" 
android:layout marginBottom-"8dp" 
android:layout marginEnd-"8dp" 
android:padding-"1lO0dp" 
android:text=" 取 消 " 
android:textColor="@android:color/holo blue dark" 
android:textSize-"14sp" 
app:layout constraintBottom toBottomOf-"8-id/searchView" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintTop toTopOf-"G8-id/searchView" /> 


«android.support.v7.widget.RecyclerView 
android:id-"Q-c*id/resultListView" 
android:layout width-"Odp" 
android:layout height-"Odp" 
android:layout marginBottom-"8dp" 
android:layout marginEnd-"8dp" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"G-c-id/searchView" 


«/android.support.constraint.ConstraintLayout» 


其 预览 图 是 这 样 的 (如 图 13.3.13.1.2 所 示 ) : 
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13.3.13.1.2 


搜索 控件 的 id 叫 “searchView”， 取 消 按 钮 (其实 是 一 个 TextView) 的 id 7j *tvCancel" , 
列表 控件 的 id 为 “resultListView”。 
我 们 还 要 为 列表 的 每 一 行 创 建 layout 资源 ， 文 件 名 为 search result item.xml， 内 容 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 
«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:paddingBottom-"2dp" 
android:paddingEnd-"l0dp" 
android:paddingStart-"lOdp" 
android:paddingTop-"2dp"» 


«ImageView 
android:id-"8-id/imageViewHead" 


android:layout width-"48dp" 
android:layout height-"48dp" 
app:srcCompat-"8drawable/space normal" 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:layout marginStart-"lOdp" 
android:orientation-"vertical"» 


«TextView 
android:id-"Q-c-id/textViewName" 
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android:layout width-"match parent" 
android:layout height-"match parent" 
android:layout weight-"1" 
android:gravity-"center vertical" 
android:text-"TextView" /» 


«TextView 
android:id-"Q*id/textViewDetail" 
android:layout width-"match parent" 


android:layout height-"match parent" 

android:layout weight-"1" 

android:gravity-"center vertical" 

android:text-"TextView" /» 
«/LinearLayout» 


«/LinearLayout» 
13.3.13.2 Activity 间 共 享 数据 


在 实现 SearchActivity 的 时 候 ， 遇 到 了 一 个 问题 : Activity 或 Fragment 之 间 共 享 数据 。 联 
系 人 集合 保存 在 ListTree 对 象 中 ( 见 MainFragment 的 方法 createContactsPage0 ,在 其 中 ListTree 
对 象 被 直接 传 给 了 Adapter) ， 而 我 们 在 SearchActivity 中 搜索 联系 人 时 ， 必 然 要 操作 ListTree 
对 象 ， 而 ListTree 对 象 是 在 MainFragment 中 创建 并 保管 的 ， 那 么 如 何 将 ListTree 对 象 传 给 
SearchActivity 呢 ? 

能 不 能 这 样 : 将 ListTree 对 象 保存 成 MainFragment 的 成 员 变量 ， 然 后 在 SearchActivity 中 
只 要 获得 MainFragment 对 象 ， 不 就 可 以 访问 ListTree 对 象 了 吗 ? 但 是 ， 这 样 完全 错误 ! 因为 
在 运行 时 , MainFragment 属于 MainActivity, 所 以 不 能 在 SearchActivity 中 获得 MainFragment! 
也 不 是 做 不 到 ， 而 是 不 应 该 ， 因 为 Activity 是 生命 期 独立 的 ， 可 能 SearchActivity 出 现 后 
MainActivity 被 系统 杀 死 了 ，MainActivity 死 后 MainFragment 也 会 很 快 跟着 死 挥 ， 此 时 访问 它 
可 能 会 引起 异常 ， 我 们 不 应 该 有 这 种 非 分 之 想 ， 没 把 握 的 事 就 不 应 该 去 做 。 

那 可 不 可 以 这 样 : 将 ListTree 对 象 设 置 成 MainFragment 的 静态 成 员 ， 这 样 ， 即 使 
MainFragment X1 RIE f , ListTree 对 象 依然 存在 。 可以, 但 这 不 是 Android 希望 的 Android 
希望 数据 与 逻辑 分 离 ，Android 希望 把 整个 App 组 件 化 ， 即 由 生命 期 独立 的 组 件 互 相配 合 完 
整个 App 的 功能 。 需 要 在 Activity 间 共 享 的 数据 也 应 该 被 组 件 化 ， 这 种 组 件 叫 作 

*ContentProvider" ! 我 们 把 共享 数据 封装 到 ContentProvider 中 ， 哪 个 Activity 想 用 它 ， 就 向 
ContentProvider 发 出 请 求 。 

Android 中 有 四 大 组 件 ，Activity 和 ContentProvider 就 是 其 中 两 个 ， 它 们 的 共同 特点 是 生 
命 期 独立 ， 你 甚至 可 以 把 一 个 组 件 看 作 是 一 个 独立 的 App， 只 是 功能 少 点 。 但 我 不 是 很 看 好 这 
种 做 法 ， 我 在 前 面 曾 斗 胆 反 对 过 这 种 做 法 。 

最 后 还 有 一 种 做 法 ， 就 是 持久 化 ， 即 把 数据 存 到 硬盘 上 (手机 没有 硬盘 ， 对 应 的 就 是 内 部 
存储 或 外 部 存储 ) 进行 共享 ， 可 以 保存 成 文件 ， 也 可 以 保存 到 数据 库 中 〈SQLite) ， 我 们 的 数 
HDE, MHARA RE. 

我 个 人 选择 的 是 还 是 第 二 种 做 法 ， 即 使 用 静态 成 员 的 方式 在 Activity 间 共 享 数据 。 虽 然 这 
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种 方式 Android 不 乐意 ， 但 它 无 法 阻止 我 们 ， 同 时 这 样 做 也 有 很 多 好 处 。 

所 以 我 把 MainFragment 的 createContactsPage() P HJ3X — J^ ListTree tree = new ListTree(); " 
移 到 MainFragment 类 中 ， 同 时 增加 一 个 public 方法 getContacts0 来 返回 ListTree 对 象 ， 如 图 
13.3.13.2.1 所 示 。 


public class MainFragment extends Fragment { 
final static int TAB MESSAGE = 0; //QQ//E 
final static int TAB CONTACTS = 1;//QQ/JC 4 A 
final static int TAB SPACE = 25;//QQX s (FJa 


private TabLayout tabLayout;// ////TabLayout/?/7 
private ViewPager viewPager; 


private viewGroup rootView; 
// JE TE Zr (HERD 


private static ListTree tree - new ListTree(); 
public static ListTree getContacts()1( 


return tree; 
; T 


图 13.3.13.2.1 


13.3.13.3 使 用 SearchView 


我 们 需要 啊 应 Search View 的 某 些 事件 来 完成 搜索 功能 。QQApp 中 可 以 做 到 实时 搜索 ， 就 
是 用 户 在 搜索 框 中 一 旦 键入 新 的 字符 , 立即 使 用 当前 的 字符 串 进行 搜索 。 我 们 利用 SearchView 
可 以 很 容易 做 到 : 为 它 设置 侦 听 器 OnQueryTextListener 即 可 ， 代 码 如 下 : 


2 

private void initSearching() { 
// TEXKTOTE 
SearchView searchView = findViewById(R.id.searchView); 
/ L8 ULBTÉR ETE X MN 
searchView.setIconifiedByDefault(false); 
//searchView.setSubmitButtonEnabled(true); 


/ / RÄ ZH 

TextView cancelView = findViewById(R.id.tvCancel); 

/ LEER IE 

final RecyclerView resultListView = findViewById(R.id.resultListView); 
resultListView.setLayoutManager (new LinearLayoutManager (this)); 
resultListView.setAdapter (new ResultListAdapter()); 


// Wy SearchView I X AKT A RH, DUISEBISEPI TER 
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener () 
QOverride 


public boolean onQueryTextSubmit(String query) { 
//[2448 Y BE” BURT, BIRA TENER, EAT 
//X E EHHBRZT, PrUlRII false, RKRMIH RAE, 
/ / KERRU, ARERR Bitit hFE. 


return false; 
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GOverride 

public boolean onQueryTextChange (String newText) { 
// ffi newText "IB ERPBZTIER, IEXJUPIMS IHE TIE RA 
ListTree tree - MainFragment.getContactsTree(); 
/ / BRF RMA A IR EE IIR IIIS A R 


searchResultList.clear(); 


//LRÉSETESIBTNBJESBH, dT 
if (!newText.equals("")) { 
/ BIZ EIN, 
ListTree.EnumPos pos = tree.startEnumNode (); 
while (pos!-null) { 
/ / RZP BA PIERRAT 
ListTree.TreeNode node = tree.getNodeByEnumPos (pos); 
if (node.getData() instanceof 
ContactsPageListAdapter.ContactInfo) { 
// BRERA EHR 
ContactsPageListAdapter.ContactInfo contactInfo 
(ContactsPageListAdapter.ContactInfo) 
node.getData (); 
/ / ERBUILIUR A DAE 
ListTree.TreeNode groupNode = node.getParent(); 
ContactsPageListAdapter.GroupInfo groupInfo - 
(ContactsPageListAdapter.GroupInfo) 
groupNode.getData(); 
String groupName - groupInfo.getTitle(); 
// EVERETT Ie PERUA I SEES IBTNE 
if (contactInfo.getName().contains(newText) || 
contactInfo.getStatus().contains(newText)) { 
V/T! DHL IIGRLAIIELB 
searchResultList.add(new MyContactInfo(contactInfo, 
groupName)); 
} 
} 
//System.out.printlin(node.getData().toString()); 
pos = tree.enumNext (pos); 


) 


//JHÁI] RecyclerView, AB/ST2CIE 
resultListView.getAdapter ().notifyDataSetChanged(); 
return true; 


在 SearchActivity 类 中 增加 一 个 方法 “initSearching0”， 把 设置 搜索 的 相关 的 代码 都 放 在 
其 中 。 注 意 这 一 句 : searchView.setIconifiedByDefault(false), 3€ SearchView 设置 成 一 个 非 图 标 
模式 ， 如 果 是 图 标 模式 ， 它 会 缩 成 一 个 放大 镜 图 标 ， 非 图 标 模式 时 它 显示 成 带 有 放大 镜 图 标的 
输入 框 。 我 在 此 方法 中 先 取 得 了 各 相关 控件 对 象 ， 保 存 到 变量 中 ， 然 后 为 保存 结果 的 
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resultListView 设置 了 Adapter 和 布局 管理 器 。 又 为 搜索 控件 设置 了 侦 听 器 ， 此 侦 听 器 有 两 个 方 
法 , 第 一 个 方法 在 用 户 发 出 开始 搜索 的 指令 时 执行 ,第 二 个 方法 是 当 搜索 文本 发 生 改 变 时 执行 ， 
显然 要 进行 实时 搜索 需要 实现 第 二 个 方法 。 在 这 个 方法 中 ， 取 得 了 保存 数据 的 集合 对 象 
ListTree， 然 后 取得 它 内 部 的 列表 ， 节 点 信息 其 实 是 保存 在 列表 中 ， 取 得 列表 是 为 了 方便 地 遍 
历 所 有 的 节点 。 有 了 这 个 列表 , 就 可 以 遍历 每 个 节点 ,看 谁 保 存 的 数据 中 包含 了 要 搜索 的 字符 
串 ， 如 果 包 含 了 ， 就 记 下 来 。 如 何 记 下 来 呢 ?” 就 是 通过 保存 到 列表 searchResultList 中 ， 当 把 
找到 的 联系 人 都 保存 到 searchResultList 后 , 调用 Adapter 的 notifyDataSetChanged0 方 法 通知 重 
新 加 载 数据 。 这 个 变量 是 SearchActivity 的 成 员 变 量 : 


注意 ，searchResultList 中 的 每 一 项 都 是 类 MyContactInfo 的 一 个 实例 。 为 了 保存 联系 人 信 
息 , 我 创建 了 类 MyContactInfo， 作 为 SearchActivity 的 内 部 类 。 为 什么 不 直接 用 类 ContactInfo 
We? 因为 它 里 面 没 有 组 信息 ，MyContactImnfo 中 除了 保存 ContactInfo 外 还 增加 了 保存 组 名 的 变 
量 ， 见 代码 : 
// Y ÉEIRTEPEEEZHUAH E, BIEX 


class MyContactInfo[( 
/ LEM INE: PIEESEUELE 
private String groupName; 
private ContactsPageListAdapter.ContactInfo info; 


public MyContactInfo(ContactsPageListAdapter.ContactInfo info, String 
groupName) { 
this.info-info; 
this.groupName - groupName; 


) 


public String getGroupName() { 
return groupName; 


) 


方法 initSearching0 需 要 在 SearchActivity 的 onCreateO0 中 调用 : 


(jOverride 

protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity search); 


/ / FB IH > 
i/ KEIR 


initSearching() ye 


我 们 为 显示 结果 的 RecyclerView 设置 了 适配器 ResultListAdapter， 那 么 ResultListAdapter 
是 如 何 实现 呢 ?》ResultListAdapter 也 没有 特殊 的 地 方 ， 无 非 就 是 根据 searchResultList 的 内 容 显 
示 各 行 ， 我 也 把 它 作为 SearchActivity 的 内 部 类 ， 代 码 如 下 : 
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class ResultListAdapter extends 
RecyclerView.Adapter«ResultListAdapter.MyViewHolder»( 
QGOverride 
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
View v= 
getLayoutInflater().inflate(R.layout.search result item,parent,false); 
return new MyViewHolder (v); 


QOverride 
public void onBindViewHolder(MyViewHolder holder, int position) { 
// BRERA, EBESINLIWETISTETR 


MyContactInfo info = searchResultList.get (position); 
holder.imageViewHead.setImageBitmap(info.info.getAvatar()); 
holder.textViewName.setText(info.info.getName()); 

String groupName -info.groupName; 

holder .textViewDetail.setText(" 来 自分 组 "+groupName) ; 


} 
QOverride 
public int getItemCount() { 
return searchResultList.size(); 
} 
public class MyViewHolder extends RecyclerView.ViewHolder { 
ImageView imageViewHead; 
TextView textViewName; 
TextView textViewDetail; 


public MyViewHolder(View itemView) { 
super(itemView); 


imageViewHead = itemView.findViewById (R.id.imageViewHead); 
textViewName = itemView.findViewById(R.id.textViewName); 
textViewDetail = itemView.findViewById(R.id.textViewDetail); 


到 此 为 止 , 实时 搜索 已 经 完成 了 。 运行 App, 在 “联系 人 ”页 面 ， 点 击 靠 项 部 的 搜索 控件 ， 
进入 搜索 页 面 ， 在 搜索 控件 中 输入 文本 ， 如 果 有 联系 人 包含 此 文本 ， 就 会 出 现 如 图 13.3.13.3.1 
所 示 效 果 。 


a F 


Ic 

Q 来 自分 组 我 的 好 友 
= = 
来 自分 组 我 的 好 友 


13.3.13.3.1 
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13.3.13.4 ”如 何 触发 非 实 时 搜索 

上 一 节 完 成 了 实时 搜索 功能 , 为 什么 又 讲 如 何 触发 非 实 时 搜索 呢 ? 因为 很 多 时 候 搜索 并 不 
是 实时 的 ， 而 是 普通 方式 ， 即 用 户 先 输入 要 搜索 的 文本 ， 输 入 完成 后 通过 某 种 方式 使 App 开 
始 执行 搜索 ， 搜 索 完 成 后 显示 结果 。 但 这 里 面 有 个 问题 : 如 何 触发 搜索 动作 的 执行 ? 

实际 上 一 般 是 通过 软 键盘 上 的 一 个 键 触发 的 。 当 你 在 SearchView 中 输入 时 ， 软 键盘 上 一 
般 会 出 现 一 个 “搜索 ” 键 。 有 图 13.3.13.4.1 为 证 。 万 一 没有 出 现 这 个 键 怎 么 办 呢 ? 你 可 以 调用 
SearchView 的 实例 方法 setSubmitButtonEnabled(true)， 如 果 传 入 参数 为 tue， 这 个 方法 会 在 
SearchView 的 右边 显示 一 个 图 标 ， 点 它 也 触发 搜索 ， 也 有 图 13.3.13.4.2 为 证 。 


1.2 iy E FTD 


BB 3 -TT QAD 


qiwieiritiylulilolp 


asdifghiljki!l 


Zixicivibinim 


图 13.3.13.4.1 图 13.3.13.4.:2 


到 此 为 止 ， 搜 索 的 主要 功能 就 实现 了 。 剩 下 的 问题 就 是 点 “取消 ”按钮 退出 了 ， 这 个 自己 
做 一 下 吧 , 无 非 就 是 调用 Activity 的 finish0 方 法 。 还 有 就 是 点 击 结果 中 的 一 条 , 进入 新 的 页 面 ， 
这 个 也 不 难 ， 请 自行 实现 一 下 吧 ? 
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上 一 章 我 们 模仿 了 QQApp 的 界面 ， 本 章 继续 实现 聊天 界面 。 


1 4 .| 实现 原理 分 析 


聊天 页 面 是 这 样 的 〈 如 图 14.1.1 所 示 ) : 


babyQ 发 表 了 说 说 


] 甜 甜 圈 怪 力 babyQ， 发 射 
ud 
17:52 
20:46 


AMSA 5 


想 和 我 聊天 吗 ? 对 话 系统 正 
在 升级 中 ， 完 成 后 就 能 陪 你 


$& a a 中 © © 
图 14.1.1 


当然 各 位 读者 对 此 界面 都 很 熟悉 ,我们 更 感 兴趣 的 是 它 的 实现 原理 。 我 们 知道 中 间 部 分 ( 显 
示 聊 天 信息 的 那 部 分 ) 是 可 以 滚动 的 ， 那 么 它 可 能 是 某 种 ScrollView 或 ListView (包括 
RecyclerView) ， 实 际 上 这 两 种 View 都 可 以 实现 这 个 效果 ， 我 感觉 用 列表 控件 实现 起 来 更 容 
易 ， 因 为 聊天 记录 这 种 数据 保存 在 List 集合 中 比较 方便 管理 。 另 外 一 个 有 意思 的 地 方 就 是 用 
气泡 显示 消息 , 我们 需要 实现 气泡 效果 , 我们 还 要 计算 出 消息 文字 所 占 的 高 度 ， 这样 才能 按 正 
确 的 大 小 显示 气泡 。 下 面 我 们 一 步 步 实现 这 个 页 面 。 
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15.2. 创建 聊天 Activity 
创建 的 过 程 我 就 不 细 说 了 , 类 名 叫 ChatActivity, 其 对 应 的 layout 资源 叫 activity chat.xml. 


14.2.1 activity chat.xml 
其 预览 图 是 这 样 的 〈 如 图 142.1.1 所 示 ) : 


14.2.1.1 


其 源码 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«android.support.design.widget.CoordinatorLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:background-"G8color/chat background" 
tools:context-"niuedu.com.qqapp.ChatActivity"» 


«android.support.design.widget.AppBarLayout 


android:layout width-"match parent" 
android:layout height-"wrap content" 
android:theme-"Qstyle/AppTheme.AppBarOverlay"» 


«android.support.v7.widget.Toolbar 
android:id-"Q8-cid/toolbar" 
android:layout width-"match parent" 
android:layout height-"?attr/actionBarSize" 
android:background-"?attr/colorPrimary" 
app:popupTheme-"8style/AppTheme.PopupOverlay" /> 
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</android.support.design.widget.AppBarLayout> 


<LinearLayout 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:layout margin-"6dp" 
android:orientation-"vertical" 
app:layout behavior-"8string/appbar scrolling view behavior"» 


«android.support.v/.widget.RecyclerView 
android:id-"Q-c-id/chatMessageListView" 
android:layout width-"match parent" 
android:layout height-"Odp" 
android:layout weight-"1" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
android:orientation-"horizontal"» 


«EditText 
android:id-"8-cid/editMessage" 
android:layout width-"Odp" 
android:layout height-"match parent" 
android:layout marginRight-"4dp" 
android:layout weight-"1l" 
android:background-"8drawable/unborder round bkground" 
android:ems-"10" 
android:inputType-"textPersonName" /» 


«Button 
android:id-2"8-4id/buttonSend" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:background-"8drawable/border round bkground" 
android:text-"Ai*" /> 
«/LinearLayout» 


«LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
android:orientation-"horizontal"» 


«ImageView 
android:id-"8-4id/imageView7" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
app:srcCompat-"8android:drawable/ic menu add" /> 


«ImageView 
android:id-"Q8-cid/imageViewl12" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
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app:srcCompat="@android:drawable/ic lock lock" /> 


«ImageView 
android:id="@+id/imageView8" 
android:layout width="0dp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
app:srcCompat-"G8android:drawable/btn star big on" 


«ImageView 
android:id-"Q8-cid/imageViewl0" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
app:srcCompat-"8android:drawable/btn radio" /> 


«ImageView 
android:id-"Q-cid/imageView9" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
app:srcCompat-"8android:drawable/ic delete" /> 


«ImageView 
android:id-"Q8-cid/imageViewll" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
app:srcCompat-"8android:drawable/ic btn speak now" /> 
«/LinearLayout» 
«/LinearLayout» 
«/android.support.design.widget.CoordinatorLayout» 


可 以 看 到 有 个 RecyclerView, HE id 为 chatMessageListView， 很 明显 ， 我 将 要 用 它 来 显示 
聊天 消息 。 


14.2.2 ”类 ChatActivity 
其 源码 如 下 : 


public class ChatActivity extends AppCompatActivity { 
public static class ChatMessage[( 
String contactName; // RA HMEZ 
Date time; /////j 
String content; //j/BPINZ 
boolean isMe;//ix fj BIB EAIIf? 


// PIETE 


public ChatMessage (String contactName, Date time, String content, boolean 
isMe) { 


this.contactName - contactName; 
this.time = time; 

this.content - content; 
this.isMe = isMe; 
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/ IFEA BMR THER 


private List«ChatMessage» chatMessages = new ArrayListc»(); 


QOverride 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
// RE Layout 
setContentView (R.layout.activity chat); 
// REAME 
Toolbar toolbar = (Toolbar) findViewById(R.id. toolbar); 


// BRAE Activity PI TEXDEIEZTE 
/ / ERA DMR FS, ABLGLUL E RINT IHE FEIER 
String contactName-getIntent ().getStringExtra ("contact name"); 
if (contactName!-null)( 
toolbar.setTitle(contactName); 


} 


setSupportActionBar (toolbar); 
// REA EIEE Hj PI PIER 
getSupportActionBar () .setDisplayHomeAsUpEnabled (true); 


// H Recycler MHH RAGA 

RecyclerView recyclerView = findViewById(R.id.chatMessageListView); 
recyclerView.setLayoutManager (new LinearLayoutManager (this) ); 
recyclerView.setAdapter (new ChatMessagesAdapter ()); 


} 


QOverride 
public boolean onOptionsItemSelected(MenuItem item) { 
int id - item.getItemId(); 
if (id == android.R.id.home) ( 
// S ESTER ER BIRERE IT 
// TERUEL Cl, XR [BD HG TA IET 
finish(); 
} 


return super.onOptionsItemSelected (item); 


} 


// 7 RecyclerView H% TE HIE AS 
public class ChatMessagesAdapter extends 
RecyclerView.Adapter«ChatMessagesAdapter.MyViewHolder» { 


QOverride 
public MyViewHolder onCreateViewHolder (ViewGroup parent, int viewType) { 
// S34 viewType E Ír/ff Layout £828 Id. M getItemViewType () FAR PIH P AE HJ 
View itemView = getLayoutInflater().inflate(viewType,parent,false); 
return new MyViewHolder (itemView); 


} 


QOverride 

public void onBindViewHolder (MyViewHolder holder, int position) { 
ChatMessage message = chatMessages.get (position); 
holder.textView.setText (message.content); 


} 


QOverride 
public int getlItemCount() { 
return chatMessages.size(); 


} 
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// HE HfT'fr layout, ATE Override WW Zi; 
QOverride 
public int getItemViewType(int position) { 
ChatMessage message = chatMessages.get (position); 
if (message.isMe) { 
/ / uURUE TE, dE EN 
return R.layout.chat message right item; 
Jjelse(í 
/ RUFI, AER UR 
return R.layout.chat message left item; 


) 


class MyViewHolder extends RecyclerView.ViewHolder[ 
private TextView textView ; 
private ImageView imageView; 


public MyViewHolder (View itemView) { 
super (itemView); 
textView = itemView.findViewById (R.id. textView); 
imageView = itemView.findViewById(R.id.imageView); 


注意 其 包含 了 两 个 内 部 类 : ChatMessage 和 ChatMessageAdapter。 其 中 ChatMessage 用 于 
保存 一 条 消息 的 信息 ，ChatMessageAdapter 为 RecyclerView 提供 数据 。 有 意思 的 是 方法 
getitemViewType(), 在 其 中 根据 一 条 消息 是 我 发 出 的 还 是 对 方 发 出 的 , 返回 不 同 的 layonut 资源 
id 作为 行 View Type。 所 以 我 们 还 需要 准备 两 个 layout 资源 ， 用 于 显示 一 条 消息 。 

14.2.3 ”显示 消息 的 layout 


创建 两 个 layout 资源 ， 人 分别 命 名 为 chat message left item.xml 和 
chat message right item.xml， 用 于 在 RecyclerView 中 显示 一 条 消息 。 它 们 的 预览 图 分 别 如 图 


14.2.3.1. Él 14.2.3.2 所 示 。 
SNe- 


图 14.2.3.1 图 14.2.3.2 


chat message left item.xml 的 源码 为 : 


<LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 


xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
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android:layout height-"wrap content" 
android:layout margin-"8dp"» 


«ImageView 
android:id-"Q*id/imageView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
app:srcCompat-"8drawable/contacts normal" /> 


«TextView 
android:id-"Q-c*id/textView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:background-"8drawable/bubble left" 
android:gravity-"center" 
android:paddingBottom-"1l0dp" 
android:paddingRight-"1l0dp" 
android:paddingStart-"40dp" 
android:paddingTop-"1l0dp" 
android:text-"Message" /» 


«/LinearLayout» 
chat message right item.xml 的 源码 为 : 


<?xml version-"1.0" encoding-"utf-8"?» 
«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout margin-"8dp" 
android:gravity-"right"» 


«FrameLayout 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout weight-"1"» 


«TextView 

android:id-"Q-cid/textView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout gravity-"end" 
android:background-"G8drawable/bubble right" 
android:gravity-"center" 
android:paddingBottom-"1l0dp" 
android:paddingEnd-"40dp" 
android:paddingStart-"lOdp" 
android:paddingTop-"1l0dp" 
android:text-"Message" /» 

«/FrameLayout» 
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«ImageView 
android:id-"Q-*id/imageView" 
android:layout width-"wrap content" 


android:layout height-"wrap content" 
app:srcCompat-"8drawable/contacts focus" /> 
«/LinearLayout» 


显示 气泡 消息 的 是 一 个 TextView， 它 之 所 以 能 显示 成 气泡 形状 ， 是 因为 将 一 个 气泡 状 图 
像 设 置 成 了 它 的 背景 。 为 了 能 让 气泡 在 放大 和 缩小 时 不 失真 ， 气 泡 图 像 应 搞 成 9Pitch 图 ， 如 
何 制 作 9Pitch 图 ， 前 面 已 经 讲 过 了 。 以 下 是 这 两 个 图 像 (图 14.2.3.3、 图 14.2.3.4) ， 注 意 其 
中 所 指定 的 能 伸缩 的 部 分 ， 这 部 分 指定 对 了 ， 图 像 在 缩放 时 就 不 会 失真 。 


14.2.3.3 14.2.3.4 


14.3 启动 ChatActivity 


当 点 击 一 个 联系 人 时 ， 进 入 聊天 界面 。 所 以 我 们 应 该 啊 应 联系 人 的 点 击 事件 ， 局 动 
ChatActivity 。 啊 应 联系 人 的 点 击 事件 应 该 在 联系 人 界面 的 Adapter 类 中 搞 ， 打 开 类 
ContactsPageListAdapter， 找 到 内 部 类 ContactViewHolder， 修 改 它 的 构造 方法 ， 添 加 对 行 控 件 
的 点 击 事件 侦 听 ， 代 码 如 下 : 


public ContactViewHolder(final View itemView) { 
super (itemView); 


imageViewHead = itemView.findViewById (R.id.imageViewHead); 
textViewTitle itemView.findViewById (R.id.textViewTitle); 
textViewDetail = itemView.findViewById(R.id.textViewDetail); 


// Zi Edi Tit, IWR 

itemView.setOnClickListener(new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
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/ / XA WRK IT 

Intent intent - new Intent(itemView.getContext(), 
ChatActivity.class); 

// RIIT HE FEIER A 


intent .putExtra ("contact name", (String)view.getTag()); 
itemView.getContext ().startActivity (intent); 


4 | ~ | ees 
n. e 


现在 还 没有 实现 网 络 连 接 , 不 能 真正 地 进行 双方 聊天 , 但 是 我 们 可 以 模拟 一 下 聊天 ， 即 当 
我 发 出 一 条 信息 后 ， 电 脑 自 动 回 复 一 条 。 

首先 要 啊 应 ChatActivity 中 的 “发 送 ” 按 钮 ， 在 其 中 “发 出 ”一 条 消息 。 之 所 以 在 “发 出 ” 
上 加 引号 ， 是 因为 我 们 不 是 真 的 发 出 去 ， 而 是 显示 在 聊天 界面 的 RecyclerView 中 。 

在 ChatActivity 的 onCreate(0 方 法 中 ， 添 加 对 “发 出 ”按钮 点 击 事件 的 啊 应 。 我 把 这 部 分 
代码 放 在 了 onCreateO 的 最 下 面 : 


/ / LITERE dr, Pm LE 
findViewById (R.id.buttonSend).setOnClickListener (new View.OnClickListener() { 
QGOverride 
public void onClick(View view) { 
// BEXE ABER IE A HIA. WEE chatMessages F, X4 nr 
//A EditText f?ÍHEKCOIH E 
EditText editText = findViewById(R.id.editMessage); 
String msg = editText.getText().toString(); 
// ISI SP. MaNBEIERecyclerView PAZ 
ChatMessage chatMessage - new ChatMessage ("我 ", new Date () ,msg, true); 
chatMessages.add(chatMessage); 
/ / [BB] EIEI Zr HALE. XLZEZKX AE -ABE 
chatMessage = new ChatMessage ("对 方 ", new Date () ," 你 是 谁 ? 你 妈 贵 姓 ?" , false); 
chatMessages.add(chatMessage); 
//J8^ll RecyclerView, "EXf—ÍFT 


recyclerView.getAdapter().notifyItemRangeInserted(chatMessages.size()-2,2); 
//iL RecyclerView AJ FRR, DUEZANXRTÉBHIB E 
recyclerView.scrollToPosition(chatMessages.size()-1); 


运行 App， 进 入 “联系 人 ”页 面 ， 点 “我 的 好 友 ”， 选 一 个 联系 人 《图 14.4.1 所 示 ) ， 进 
入 聊天 页 面 ， 输 入 消息 并 发 出 ， 出 现 图 14.4.2 所 示 效 果 。 
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> 特别 关心 
我 的 好 友 


TERTRE, PRESS | an 


a D & * Ox 
[RHHUR A UO O 


RITIIYIUIIIO 


AISIDIFIGIHI!J L 


2$ z X CV B.NM-S9 


符 123 , 


图 14.4.1 14.4.2 


到 此 为 止 ， 聊 天 界面 已 经 实现 了 ,但 是 离 真 正 网 络 聊天 还 关 得 远 。 我 们 下 面 就 应 该 讲 网 络 
通信 了 , 但 是 网 络 通信 绝对 离 不 开 多 线程 , 因为 网 络 通 信 的 执行 过 程 必须 在 主线 程 之 外 的 线程 
中 执行 ， 所 以 我 们 下 面 先 讲 多 线程 ， 再 讲 网 络 通信 。 
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多 线程 是 令 初学 者 非常 头痛 的 一 个 概念 , 尤其 将 多 线程 与 同步 、 异 步 这 些 调用 方式 混在 一 
讲 ， 但 它们 有 时 真 的 分 不 开 。 

但 是 你 别 害怕 ， 因 为 你 害怕 也 没 用 ,作为 一 名 程序 设计 从 业 人 员 ， 你 必须 搞 明 白 它 。 只 要 
我 讲 得 明白 ， 你 肯定 更 容易 掌握 它 ， 那 我 就 尽量 讲 明白 。 

先 声 明 一 点 ， 我 不 会 讲 太 细 ， 我 讲 原 理 和 松 仿 ， 理 解 以 后 你 自己 去 查找 资料 学 习 细 节 。 


线程 与 进程 的 概念 


我 们 知道 程序 在 硬盘 中 是 一 个 可 执行 文件 ， 当 执行 这 个 文件 时 ， 它 会 被 加 载 到 内 存 中 ,此 
时 就 有 了 一 个 进程 。 

一 个 可 执行 文件 可 以 被 运行 多 次 , 那么 一 个 程序 是 可 以 对 应 多 个 进程 的 , 虽然 这 些 进 程 都 
是 由 同一 个 程序 产生 的 ,它们 之 间 却 没有 关系 ， 这 个 没有 关系 指 的 是 内 存 空 间 ， 每 个 进程 有 目 
己 的 内 存 空间 , 一 个 进程 不 可 能 访问 另 一 个 进程 中 的 变量 , 更 不 可 能 调用 另 一 个 进程 中 的 图 数 ， 
进程 就 像 关 在 全 面 封闭 无 门 无 窗 的 牢房 里 ， 根 本 不 允许 互相 之 间 直 接 对 话 。 

那 是 如 何 做 到 让 每 个 进程 有 独立 的 内 存 空 间 的 呢 ? 不 论 电 脑 的 物理 内 存 是 多 少 ，32 位 的 
进程 总 是 感觉 目 己 有 4G 的 内 存 可 以 使 用 ， 这 其 实 是 操作 系统 虚拟 出 来 的 内 存 空 间 ， 操 作 系 统 
欺骗 了 进程 。 

程序 要 运行 , 仅 有 进程 还 不 行 , 还 必须 有 线程 ! 如 果 没 有 线程 , 程序 只 是 被 加 载 到 内 存 中 ， 
但 不 能 运行 ! 也 就 是 程序 里 的 代码 不 能 被 CPU DAT! 就 是 这 么 奇怪 。 

为 了 能 执行 程序 ,操作 系统 在 创建 完 进程 后 ,会 默认 创建 出 一 个 线程 并 开始 执行 ， 这 个 线 
程 叫 主 线程 。 线 程 必 须 从 某 个 函数 开始 执行 ， 也 就 是 它 的 入 口 函 数 ,， REA, 主线 程 的 入 口 函 
数 是 “main0”! 所 以 ， 要 创建 一 个 线程 ， 必 须 为 它 指定 一 个 入 口 函 数 〈(Java 中 叫 方 法 ) 。 注 
Ek. RI AES 其余 线 程 都 是 主线 程 直接 或 间接 创建 出 来 的 , 间接 指 的 是 由 主线 程 创建 的 线 
程 再 创建 线程 的 方式 。 实 际 上 除了 创建 者 不 同 , 线程 之 间 没 有 任何 区 别 ， 也 就 是 主线 程 特殊 一 
点 点 吧 : 主线 程 结 束 时 ， 程 序 就 会 结束 ， 此 时 未 执行 完 的 其 他 程序 会 被 强制 杀 死 。 

线程 的 入 口 函数 返回 时 , 线程 就 正常 结束 , 但 有 时 线程 会 非 正 常 结束 , 线程 非 正常 结束 往 
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既然 进程 之 间 不 能 互相 直接 访问 , 那 进程 内 就 可 以 互相 直接 访问 了 对 吧 ? 完全 正确 ! 大 家 
都 在 一 间 屋 里 , 当然 可 以 看 到 彼此 。 进 程 内 的 线程 可 以 访问 同一 进程 内 其 他 线程 中 创建 的 变量 ， 
虽然 有 时 语法 上 不 允许 (比如 不 能 访问 别人 的 私有 变量 ) ， 但 其 实 是 可 以 绕 过 语法 的 限制 的 。 

那么 线程 到 底 是 什么 呢 ? 你 可 以 把 一 个 线程 认为 是 一 个 虚拟 的 CPU。 如 果 把 两 个 函数 都 
分 配给 同一 个 CPU 执行 ， 那 么 这 两 个 函数 会 根据 其 调用 顺序 依次 执行 ， 一 个 执行 完了 ， 才 执 
行 下 一 个 ， 这 就 叫 “ 同 步 执行 〈 或 同步 调用 ) ”， 我 们 写 的 大 多 数 代码 都 是 同步 执行 的 。 但 如 
果 把 两 个 函数 分 配给 两 个 CPU 执行 ， 那 么 这 两 个 函数 就 可 以 同时 执行 ， 不 必 等 待 一 个 执行 完 
了 再 执行 下 一 个 ， 这 叫 异 步 执 行 〈 或 异步 调用 ) 。 可 见 同 步 执行 并 不 是 同时 执行 ， 反 而 异步 执 
行 才 有 同时 执行 的 可 能 性 。 把 两 个 函数 分 配给 两 个 CPU 执行 ， 就 需要 通过 创建 线程 的 方式 来 
实现 了 。 

其 实 我 们 很 容易 想到 , 单线 程 必然 对 应 着 同步 执行 , 因为 在 单线 程 中 函数 必然 根据 其 调用 
顺序 依次 执行 的 , 同 理 多 线程 就 对 应 的 必然 是 异步 执行 ,因为 多 个 线程 之 间 无 法 做 到 同步 执行 。 
但 是 ， 你 想 错 了 ! 单线 程 也 可 以 做 到 异步 执行 ， 多 线程 也 可 以 做 到 同步 执行 。 我 们 后 面 会 详细 
讲解 其 中 的 原理 。 下 面 我 们 首先 创建 一 个 线程 玩 玩 。 


创建 线程 


我 们 创建 一 个 新 项 目 ， 专 门 用 于 测试 线程 。 项 目 名 叫 ThreadDemo， 如 图 15.2.1 所 示 。 


Application name 


ThreadDemo 


Company domain 


administrator.example.com 


Project location 


FAworkspaceVXThreadDemo 


Package name 


com.example.administrator.threaddemo 


[ ] Include C++ support 
[ ] Include Kotlin support 


图 15.2.1 


后 面 都 按 回 导 默 认 即 可 。 然 后 我 在 Activity 的 界面 中 添加 了 两 个 按钮 ， 如 图 15.2.2 所 示 。 
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ThreadDemo 


显示 提示 创建 线程 


图 15.2.2 


这 两 个 按钮 的 id 分 别 为 “buttonShowTip (显示 提示 ) ”和 “buttonStartThread (开启 线 
FE) ”。 在 onCreate0 中 啊 应 “显示 提示 ”按钮 的 点 击 事件 ， 以 显示 提示 : 


/ / BILE ZI TE IN HITEH 
findViewById (R.id.buttonShowTip).setOnClickListener( 
new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
Snackbar.make(v, 
"我 显示 了 表示 界面 没 死 掉 "， 


Snackbar.LENGTH LONG) .Show () ; 


当 点 击 “ 显 示 提 示 ” 按 钮 时 ， 出 现 如 图 15.2.3 所 示 现 象 。 


15.2.3 
再 啊 应 “创建 线程 ”按钮 的 点 击 事件 : 


findViewById (R.id.buttonStartThread).setOnClickListener( 
new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
// RIFET HIETE, — HE EL P i FERE ELI IE] 
try { 


Thread.sleep(20000); 
} catch (InterruptedException e) { 
e.printStackTrace(); 


要 注意 其 中 的 代码 ， 我 现在 并 没有 在 其 中 开局 线程 ， 而 是 让 当前 线程 ( 束 是 界面 线程 ) BE 
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了 20 秒 〈20000 毫秒 ) 。 因 为 界面 的 操作 包括 事件 啊 应 都 是 在 界面 线程 中 执行 ， 所 以 这 里 让 
界面 线程 sleep 时 ， 界 面 就 成 为 假死 状态 ， 点 哪个 按钮 都 没 反 应 。 我 在 我 的 手机 CAndroid7.0) 
上 测试 ， 在 停止 反应 一 段 时 间 后 ， 系 统 直接 把 这 个 App FHI, KA Android 系统 是 能 检测 
到 界面 长 时 间 无 反应 的 App 的 。 

因为 对 界面 的 处 理 都 是 在 界面 线程 中 发 生 ， 所 以 当 某 一 步 进行 大 量 运算 或 直接 长 时 间 
sleep 时 ， 后 序 的 代码 就 不 能 执行 ， 所 以 界面 就 变 得 没 反 应 (假死 )， 而 这 一 切 在 使 用 多 线程 
后 将 迎刃而解 。 下 面 把 “创建 线程 ”按钮 的 啊 应 代码 改 为 创建 新 线程 : 


findViewById (R.id.buttonStartThread).setOnClickListener( 
new View.OnClickListener() { 


QOverride 
public void onClick(View v) { 
new MyThread().start(); 


现在 改 成 了 创建 一 个 线程 类 (MyThread) 的 实例 ， 然 后 调用 这 个 线程 的 start0 方 法 以 启动 线 
程 。 注 意 不 调用 线程 的 start0 方 法 线程 不 会 执行 。onClick0 是 在 界面 线程 中 调用 ， 所 以 依然 是 
在 界面 线程 中 局 动 了 新 线程 ， 但 是 新 线程 局 动 后 其 代码 就 不 在 界面 线程 中 执行 了 。 
MyThread 类 是 什么 呢 ? 下 面 是 其 定义 ， 我 把 它 作 为 Activity 的 内 部 类 : 
class MyThread extends Thread( 
QGOverride 
public void run() { 
/ BE SEEERILA LL 
try { 


Thread.sleep (20000); 
} catch (InterruptedException e) { 
e.printStackTrace(); 


' A Thread 派生 ， 重 写 了 Thread 类 的 run0 方 法 。run0 融 是 线程 的 入 口 方法 ， 线 程 司 动 后 
执行 的 就 是 它 。 我们 依然 sleep 了 20 秒 , 但 是 这 次 还 会 像 上 次 一 样 造成 界面 无 反应 吗 ? 你 试 一 
F, EDEA MAMEET? 为 什么 ? 因为 不 是 界面 线程 sleep 了 ， 上 所 以 界面 就 不 会 无 啊 应 。 

Android 规定 ， 耗 时 的 操作 必须 在 界面 线程 之 外 的 线程 中 执行 ! 尤其 是 网 络 操作 ， 因 为 网 
络 操作 动不动 就 会 像 sleep 一 样 让 线程 阻塞 10 秒 、20 秒 的 。 

Android 中 ， 界 面 线程 就 是 主线 程 ! 


创建 线程 的 另 一 种 方法 


直接 上 代码 : 
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// ÉItEZC FEE SUL. H Rannable 
Thread thread = new Thread (new Runnable() { 
QOverride 


public void run() { 
/ / BEESEBEMLA OZA 
try | 
Log.i("me","sleep"); 


Thread.sleep(20000); 
} catch (InterruptedException e) { 
e.printStackTrace(); 
} 
} 
)); 
thread.start(); 

与 第 一 种 方法 大 同 小 异 ， 就 是 把 入 口 方法 封装 在 一 个 Rannable 对 象 中 。“Rannable” 从 

名 字 来 看 是 代表 一 个 可 以 执行 的 对 象 ， 它 就 是 用 于 封装 一 段 代 码 的 ， 它 只 定义 了 一 个 方法 : 
run0， 很 显然 ， 代 码 就 放 在 mno. MH Runnable 的 好 处 是 可 以 使 用 匿名 类 语法 ， 代 码 写 起 来 
方便 一 点 吧 。 

这 里 要 弄 清 几 个 概念 ， 也 就 是 大 家 的 一 些 习 惯 叫 法 。 界 面 所 在 的 线程 一 般 都 是 主线 程 
(Android 中 肯定 是 主线 程 》， 所 以 我 们 喜欢 把 “主线 程 ” 和 “界面 线程 ” 混 着 叫 ， 有 了 时 也 叫 
“UI 线程 ”， 因 为 界面 就 是 “User Interface (UD ”的 意思 。 主 线程 中 创建 的 新 线程 习惯 做 
“ 子 线程 ”。 又 由 于 界面 是 能 被 看 到 的 ， 所 以 “界面 线程 ”又 叫 “ 前 台 线 程 ”， 其 他 线程 叫 作 
“后 台 线 程 ” 或 “工作 线程 ”。 所 以 主线 程 、 界 面 线程 、UI 线程 、 前 台 线 程 都 是 指 主线 程 ， 
而 后 台 线 程 、 子 线程 、 工 作 线 程 都 是 指 主线 程 之 外 的 线程 。 


多 个 线程 操作 同一 个 对 象 


假设 我 们 写 一 个 游戏 。 游 戏 中 肯定 要 保存 玩家 的 信息 吧 ? 我 们 用 一 个 类 Player 来 保存 这 
些 信 息 ， 这 些 信 息 可 能 包括 玩家 名 字 、 性 别 、 等 级 、 生 命 值 、 魔 法 值 、 攻 击 、 防 御 、 服 装 、 发 
型 、 图 像 等 ， 具 体 如 下 : 


class Player( 
private String name; 
private boolean sex;/ 
private Object image; // BJK 
private int level; //#Z 
private int clothes; ///KÍíf 


private int 

private int defence; // Øri 
private int hairdo; //&Æ 
private int health; //Æ frä 
private int magic; ///É;4 


, araara 
/ / Men An 
/ / FF 
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假设 游戏 中 提供 了 这 样 一 个 功能 : 玩家 可 以 随时 去 共 个 地 点 伦 钱 改变 玩家 的 性 别 。 代 码 改 
变性 别 的 过 程 中 , 不 是 仅 设置 一 个 sex 就 行 了， 需要 设置 Player 的 多 个 属性 ， 因 为 随 着 性 别 的 
改变 , 可 能 服装 、 发型、 人 物 图 像 等 都 要 跟着 变 , 但 这 些 属性 在 代码 中 只 能 一 个 接 一 个 去 改变 。 
游戏 中 一 般 都 会 开 多 个 线程 ， 如 果 一 个 线程 A 正在 改变 玩家 的 性 别 ， 代 码 大 致 如 下 : 


Player player = new Player(); 
/ / EXEAT ÍCES 
V uas 
/ / ARETE 
if (requestChangeSex()--true) { 
// AFfÉ 
player.sex = !player.sex; 
if (player.sex == true) { 
// SEI T LHI 
player.clothes-10; 
player.image-new Object(); 
player.hairdo - 1100; 
Kl esa 
Jelse( 
// 变 成 了 男 的 
Ef sias 
j 
}else{ 
Po 
| 


此 时 男 一 个 线程 B 在 读 取 这 个 玩家 的 信息 并 把 它 显示 出 来 ， 代 人 码 大 致 如 下 : 


// 游 戏 逻 辑 
a 

/ / JERGX PUR 

Player player = getPlayer (playerId); 


if (player !=null) { 
// IZ 了 VELA f A 


巧 的 是 ， 变 性 中 对 相关 的 属性 才 改 变 了 一 半 就 被 这 个 线程 B 把 Player 对 象 读 了 出 来 ， 那 
么 此 时 显示 出 来 的 玩家 可 能 是 一 个 长 着 一 寸 多 长 护 胸 毛 的 女 的 ,也 可 能 是 一 个 留 着 白 娘 子 头 饰 
HERI, ARIRE T 。 

如 何 避 免 这 种 情况 出 现 呢 ? 只 要 你 能 保证 玩家 信息 在 变性 操作 完 后 才能 被 读 取 , 就 避免 这 
个 情况 了 ,也 就 是 在 一 个 线程 中 设置 玩家 信息 时 ， 要 阻止 其 他 线程 访问 这 个 玩家 的 信息 ， 这 叫 
作 保 证 变性 操作 的 “原子 性 ”。 如 何 保证 一 堆 操 作 的 原子 性 能 呢 ? 上 锁 ! 这 种 锁 不 是 一 般 的 锁 ， 
它 无 色 无 味 ， 锁 代码 于 无 形 。 上 此 锁 之 后 ， 就 能 保证 一 块 数据 在 一 个 线程 中 被 操作 期 间 ， 其 余 
线程 不 能 操作 这 块 数据 ， 如 果 要 操作 ， 只 能 等 待 那个 线程 完成 操作 后 方 可 ， 这 造成 了 同步 执行 
的 效果 ， 所 以 它 叫 “同步 锁 ”! 
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如 果 把 一 个 线程 比 想像 成 一 条 公路 ， 那 两 个 线程 就 是 两 条 , 每 条 公路 上 的 车 依次 行驶 ， 两 
条 公路 之 间 不 存在 行车 干扰 的 问题 。 同 步 锁 就 像 两 条 公路 汇合 且 变 罕 的 地 方 , 过 了 这 个 汇合 区 
依然 是 两 条 公路 ， 但 这 个 汇合 区 只 有 一 车 的 宽度 ， 所 以 两 条 路 上 的 车 得 一 辆 跟着 一 辆 通过 。 注 
意 通过 之 后 每 辆 车 还 是 走 上 自己 的 路 ， 不 会 串 到 另 一 条 上 去 。 

如 何 加 锁 才 能 保证 变性 操作 的 原子 性 呢 ? 下 面 我 们 就 为 上 面 的 两 段 代 码 加 锁 。 但 要 加 锁 得 
先 创建 锁 ， 可 能 要 在 多 个 类 中 使 用 这 把 锁 ， 所 以 在 茶 个 类 中 用 一 个 公开 静态 第 量 保存 它 : 


public static final ReentrantLock lock = new ReentrantLock(); 


加 锁 后 的 代码 如 下 ， 线 程 A: 


/ XE PINAG 


if(requestChangeSex()--true) { 

// Ef 

lock.lock(); 

player.sex - !player.sex; 

if (player.sex == true) { 
// 88K T LKI 
player.clothes-10; 
player.image-new Object(); 
player.hairdo - 1100; 
fées 

Jjelse( 
// 变 成 了 男 的 


lock.unlock(); 
}else{ 


/ / EXE H 
/ / "n 
lock.lock(); 
Player player = getPlayer (playerId); 
lock.unlock(); 
if (player !=null){ 
/ / BRIKT 


lockO 是 上 锁 ，unlockO 是 开锁 。 注 意 只 有 A 线程 上 锁 ，B 不 上 锁 的 话 ， 锁 不 起 作用 。 要 想 
让 锁 起 作用 ， 两 个 线程 都 上 锁 ， 当 然 它 们 还 必须 使 用 同一 把 锁 。 
执行 过 程 是 这 样 的 ， 假 设 线程 A 先 执 行 的 lock0， 因 为 此 时 没有 其 他 线程 调用 lock0, Hr 


355 


Android 9 编程 通俗 演义 


以 不 用 等 待 ， 继 续 执 行 ， 假 设 在 A 执行 到 unlock0 之 前 ， 线 程 B 执行 到 了 lock0， 由 于 此 时 已 
经 有 A 执行 了 lock0， 那 么 B 就 停 在 lock0O 这 句 进行 等 待 ， 直 到 A 中 执行 了 unlock0，B 才能 
继续 执行 。 反 过 来 B 先进 入 锁 也 一 样 。 这 是 不 是 保证 了 变性 过 程 的 原子 性 ? 

还 要 注意 的 就 是 要 锁 住 的 代码 范围 如 何 界定 。 虽 然 锁 的 是 代码 ,得 实际 上 要 保护 的 是 数据 ， 
所 以 锁 住 的 代码 越 少 越 好 ， 仅 能 保护 该 保护 的 数据 就 可 以 ,按照 这 个 原则 , 仔细 体会 一 下 上 述 
代码 的 加 锁 位 置 。 

一 种 更 简单 的 锁 是 synchronized， 用 起 来 更 方便 一 些 ， 但 它 与 Lock 的 作用 原理 没什么 区 
别 ， 实 际 上 它 就 是 基于 Lock 搞 出 来 的 。 还 有 其 他 很 多 与 多 线程 同步 相关 的 对 象 和 概念 ， 但 我 
们 就 不 讨论 更 多 细节 了 ， 这 里 主要 是 帮 你 理解 多 线程 同步 的 概念 。 

总 之 这 种 锁 叫 同步 锁 ， 通 过 它 可 以 对 多 个 线程 共同 访问 的 某 个 块 数据 进行 同步 保护 。 


单线 程 中 异步 执行 


你 可 能 想 : 多 线程 之 间 是 异步 执行 , 而 在 单线 程 中 永远 不 可 能 出 现 两 个 函数 同时 执行 的 可 
能 性 ， 那 么 单线 程 中 就 只 有 同步 执行 ， 而 没有 异步 执行 了 吧 ? 错 ! 这 个 世界 是 如 此 的 复杂 ， 不 
合理 的 事情 很 多 ， 比 如 在 同一 个 线程 中 ， 完 全 可 以 写 出 异步 执行 的 代码 ! 

虽然 单线 程 中 不 可 能 做 到 同时 调用 两 个 函数 (方法)，, 但 是 却 可 以 做 到 调用 完 第 一 个 后 以 
不 明显 的 方式 调用 第 二 个 , 或 不 确定 在 之 后 的 什么 时 间 调 用 第 二 个 。 一 个 很 有 代表 性 的 例子 就 
是 事件 侦 听 器 。 事 件 侦 听 器 是 一 个 类 ， 但 其 实 它 的 真正 目的 是 封装 要 调用 的 方法 GE C 语言 
中 可 以 直接 指定 一 个 回调 函数 来 啊 应 事件 ， 但 是 在 Java 中 限于 面 问 对 象 的 原则 ， 必 须 有 一 个 
类 来 包 着 这 个 回调 方法 ) 。 在 设置 事件 侦 听 器 后 ， 并 不 是 紧 接 着 就 执行 侦 听 器 中 的 方法 ， 而 是 
在 事件 发 生 时 才 会 调用 .可 以 确定 的 是 设置 侦 听 器 的 方法 和 事件 啊 应 方法 的 调用 绝对 都 是 在 主 
线程 中 ， 但 是 它们 却 是 异步 执行 的 。 看 下 面 这 段 代 码 : 
buttonLodgdin.setonClickListener (new View.OnClickListener() { 

QOverride 

public void onClick(View view) { 

FragmentManager fragmentManager = 
getActivity().getSupportFragmentManager (); 


FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 


MainFragment fragment = new MainFragment (); 
//É f&f$ FrameLayout FHA HI Fragment 
fragmentTransaction.replace(R.id.fragment container, fragment); 


/ BEC HIA ICA EB HER, RET AEAT RRN E RIA IRL E f FUIT 


fragmentTransaction.addToBackStack ("login"); 
fragmentTransaction.commit (); 
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setOnClickListener0 完 成 之 后 并 不 会 紧 跟 着 调用 onClick0，onClick 只 有 在 产生 click 事件 
后 才 执行 ， 怎 么 产生 click 事件 呢 ? 当 用 户 点 击 buttonLogin 这 个 按钮 时 。 

至 于 这 是 怎么 做 到 的 ,大体 说 一 下 吧 : 界面 线程 都 会 由 一 个 循环 构成 , 我们 就 把 它 叫 作 大 
循环 吧 ， 线 程 还 有 一 个 事件 列表 (其 实 是 队列 ,我 感觉 想象 成 列表 容易 理解 )， 系 统 产 生 的 事 
件 首先 放 到 事件 列表 中 进行 排队 , 这 个 大 循环 每 循环 一 次 只 处 理 一 个 事件 , 在 处 理 过 程 中 可 能 
会 添加 新 的 事件 侦 听 器 。 处 理事 件 的 方式 就 是 调用 事件 对 应 的 侦 听 器 中 的 方法 , 处理 完 后 把 事 
件 从 列表 中 删 兵 。 于 是 看 官 你 可 以 想 一 想 , 在 某 一 时 刻 添 加 的 侦 听 器 ， 只 有 等 到 对 应 的 事件 产 
生 了 ， 才 会 在 某 次 循环 中 被 处 理 ， 所 以 侦 听 器 中 的 方法 的 调用 时 刻 是 未 知 的 。 

讲 到 这 里 ， 可 能 聪明 的 你 又 想 : 既然 单线 程 中 可 以 做 到 异步 执行 ， 那 多 线程 之 间 可 不 可 以 
做 到 同步 执行 呢 ? 咱们 下 节 再 讲 。 


多 线程 间 同 步 执行 


同步 执行 其 实 就 是 依次 执行 ,一 个 方法 返回 后 再 执行 下 一 个 。 使 用 多 个 线程 ,完全 可 以 搞 
出 同步 执行 的 效果 。 比 如 有 两 个 方法 £AQRI BO, S415 8 TE {AO 后面 调用 龟 0， 这 在 一 个 线 
程 中 易如反掌 ， 只 需 这 样 写 : 


fA(); 
fB(); 
假设 人 0 执行 2 秒 ， 旬 0 执行 3 秒 ， 那 么 此 时 这 两 个 的 执行 时 间 是 2973-5 秒 。 使 用 多 线程 
时 ， 我 们 可 以 这 样 做 : 创建 新 线程 ， 在 其 中 执行 fAO， 局 动 这 个 线程 ， 然 后 执行 BO. ARE i 
F: 
Thread thread = new Thread (new Runnable() { 
QOverride 


public void run() { 
fA(); 


} 
)); 
thread.start(); 
fB(); 


假设 创建 并 启动 线程 需要 1 秒 的 话 ， 那 么 在 这 个 1 秒 之 后 ，fAO 和 fBO 会 同时 开始 执行 。 
由 于 fB0 需 执行 3 秒 ，fAO 只 执行 2 秒 ， 那 么 {AO 会 提前 完成 ， 所 以 {AO 和 fB0 的 执行 持续 时 
间 就 是 人 B0 的 执行 时 间 ， 当 然 还 应 该 加 上 创建 线程 的 那 1 秒 。 也 就 是 说 使 用 多 线程 之 后 ， 两 个 
方法 的 执行 时 间 为 3+1, 比 单线 程 中 少 用 了 1 秒 。 当然 我 们 这 里 不 是 说 多 线程 节省 时 间 的 问题 ， 
而 是 说 如 何在 使 用 多 线程 时 ,保证 fB0 在 f 人 AO 返回 后 执行 的 问题 我们 如 果 能 让 人 B0 先 等 待 fAO 
执行 完毕 再 执行 , 是 不 是 就 达到 目的 了 ? 这 个 还 真 不 难 , 因为 操作 系统 提供 了 线程 之 间 互 相等 
待 的 函数 ，Java 中 也 提供 了 这 样 的 方法 : Thread 的 实例 方法 join). R E thread.start0 之 后 调 
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用 joinQ. WAS fr thread 对 象 所 代表 的 线程 结束 后 再 执行 fBO, fU P: 


thread.start(); 
thread.join(); 


fB(); 
MA TUE GEOK 264 Ae EB TURRIS. 因为 这 种 场景 下 根本 没有 必要 使 用 多 线程 , 但 是 这 只 是 证 


明 多 线程 之 间 真 的 可 以 同步 执行 。 其 实 多 个 线程 之 间 可 以 使 用 “信号 ”实现 真正 的 同步 执行 ， 
就 是 说 不 用 一 个 线程 等 待 男 一 个 结束 ， 通 过 互相 发 送信 号 ， 就 可 以 做 到 线程 B 中 在 执行 fBO 
之 前 ， 先 等 待 线程 A 中 的 {AO 执行 完成 。 


在 其 他 线程 中 操作 界面 


现在 你 已 发 现 ,创建 一 个 线程 是 如 此 简单 ! 而 且 同 步 和 异步 执行 的 概念 也 不 是 那么 难 理解 。 
下 面 ， 就 讲 一 下 线程 在 Android 开发 中 的 使 用 。 

在 实际 开发 过 程 中 , 我 们 常常 要 在 后 台 线 程 中 操作 控件 ， 比 如 我 们 在 后 台 线 程 中 发 出 网 络 
请 求 ， 取 得 了 一 个 头像 ， 然 后 我 们 需要 把 头像 设置 给 某 个 ImageView 控件 显示 ， 由 于 在 同一 
个 进程 内 ， 你 在 任何 线程 中 都 完全 可 以 获取 控件 对 象 ， 然 后 操作 它 ， 但 是 …… 不 能 这 么 玩 ! 记 
住 一 个 原则 : 绝 不 要 在 界面 线程 之 外 的 线程 中 操作 界面 组 件 ! 也 就 是 说 只 能 在 界面 线程 中 操作 
界面 ! 这 个 原则 就 像 禁 止 兄 妹 结婚 这 条 人 伦 规范 一 样 ， 你 真 的 要 无 视 它 ， 也 可 以 ,但 是 后 果 可 
能 很 严重 ! 原因 说 起 来 是 很 复杂 的 ， 我 就 不 细 说 了 ， 但 这 条 原则 却 是 千 真 万 确 的 。 

那 我 们 在 后 台 线 程 中 得 到 的 图 像 ， 如 何 设置 到 ImageView FPE? 其 实 也 不 难 ， 我 们 可 以 
把 设置 图 像 的 代码 “ 扔 ”到 UI 线程 中 执行 ! 

为 什么 可 以 同 UI 线程 中 “ 扔 ”代码 呢 ? 因为 UI 线程 必然 由 一 个 循环 构成 ， 并 且 有 一 个 
事件 队列 ， 这些 前 面 已 经 讲 过 了 。 如 果 把 事件 队列 扩展 一 下 ,让 它 除 了 能 保存 事件 ， 还 能 保存 
一 段 一 段 的 代码 ， 那 么 后 台 线 程 同 U 线程 “ 扔 ”代码 实际 上 就 是 把 这 段 代 码 加 到 其 事件 队列 
中 进行 排队 ， 在 未 来 某 次 循环 中 就 会 执行 这 些 代 码 。 在 后 台 线 程 中 ， 把 一 段 代 码 “ 扔 ”给 UI 
线程 后 ， 会 继续 执行 后 面 的 代码 ， 而 不 必 等 待 这 段 被 “ 扔 ”的 方法 执行 完 

当然 在 Java 中 你 不 能 直接 “ 扔 ”一 个 段 代 人 码 给 某 个 线程 ， 你 只 能 “ 扔 ”一 个 对 象 ， 所 以 
这 段 代 码 应 该 以 Runnable 或 其 他 类 包装 一 下 。“ 扔 ”代码 需 使 用 一 个 叫 作 Handler 的 类 ， 下 
面 详细 讲 一 下 。 


Handler 


这 里 讲 的 Handler 是 包 android.os 中 的 类 ， 其 他 包 也 有 叫 Handler 的 类 ， 注 意 区 分 。 
要 使 用 它 , 需 先 创建 它 的 实例 , 因为 只 有 大 循环 和 消息 队列 的 线程 才能 接受 “ 扔 ”过 来 的 
方法 ， 所 以 创建 Handler 实例 时 需 关 联 目标 线程 的 大 循环 ， 代 码 如 下 : 
// DIESE, EREEREER 
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Handler handler = new Handler (Looper.getMainLooper()); 
关联 之 后 就 可 以 扔 了 ， 代 码 如 是 : 
// FIHESEO BERE -NA 


handler.post(new Runnable() { 


QOverride 

public void run() { 

// LE ITCES SS SIX 18 

} 

)); 

可 以 看 到 ， 用 post0 方 法 扔 了 一 个 Runnable 过 去 ， 扔 过 去 的 代码 是 异步 执行 ， 也 就 是 在 本 
线程 中 扔 完了 如 不 管 了 ， 反 正 后 面 菜 个 时 刻 会 在 目标 线程 中 执行 ， 我 继续 干 我 的 事 。 实 际 上 
Handler 提高 了 多 个 以 “post” 开 头 的 方法 用 于 扔 代码 ,有 的 可 以 提供 更 多 的 控制 ,如 图 15.8.1.1 
所 示 。 


handler.post 
Í postAtFrontOfQueue(Runnable r) boolean 
postAtTime(Runnable r, long uptim... boolean 
postAtTime (Runnable r, Object tok. boolean 
postDelayed(Runnable r, long dela... boolean I7 


15.8.1.1 


根据 方法 名 就 能 看 出 各 上 自 的 作用 ，postAtFrontOfQueue 表示 放 到 队列 的 最 前 面 ， 这 可 以 尽 
快 执行 扔 过 去 的 代码 ，postAtTime 可 以 指定 执行 开始 的 绝对 时 间 ，postDelayed 指定 执行 开始 
的 相对 延迟 时 间 等 等 。 

有 时 我 们 要 反复 扔 一 段 代 码 , 而 且 每 次 扔 的 时 候 所 带 的 参数 有 所 变化 , 比如 这 次 处 理 老 王 
搬家 的 事 ， 下 次 处 理 小 刘 搬 家 的 事 ， 搬 家 的 迎 辑 是 不 变 的 ， 被 处 理 的 人 变 了 ， 那 么 如 果 用 
Runnable 包装 的 话 ， 与 起 来 很 及 烦 〈 与 下 面 的 方式 比 起 来 ， 要 有 厅 烦 不 少 ， 不 信 你 可 以 写 与 试 
试 ) ， 于 是 Handler 还 提供 了 另外 一 种 包装 代码 的 方法 : Callback 类 。 看 下 面 的 代码 : 

/ / ÆRU, EXC EIDEM ACIER 
Handler handler = new Handler(Looper.getMainLooper(), new Handler.Callback() { 
QOverride 
public boolean handleMessage (Message msg) { 
switch (msg.what)í 


case MSG 1: 
/ / ÁEEEIE 1 


break; 


case MSG 2: 
// &KFEIBE 1 
break; 

case MSG 3: 
// KR BEI 1 


break; 
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case MSG 4: 
// &&BESHLEI 1 
break; 
} 
return false; 
} 
)); 


/ / IRI ARRIER S — f BU 
handler.sendEmptyMessage (MSG 1); 


代码 被 封装 到 Handler.Callback "P, Handler.Callback 的 派生 类 只 需 实 现 一 个 方法 

handleMessage()， 此 方法 中 根据 传 入 的 Message 对 象 进 行 不 同 的 处 理 。 现 在 扔 的 已 不 是 代码 了 
(代码 已 经 被 关联 到 目标 线程 了 ), 而 是 消息 。 如 果 消 息 不 剖 参 数 , 可 以 使 用 sendEmptyMessage0) 

只 发 送 消息 编号 ; 如 果 帝 有 参数 ， 就 要 创建 一 个 Message 实例 ， 把 参数 放 到 这 个 Message 中 ， 
然后 调用 方法 sendMessage0 发 送 它 。 

能 不 能 在 主线 程 中 利用 handler 回 上 自己 扔 代码 呢 ? 当然 没 问题 ! 

LA, 我 们 上 自己 创 建 的 线程 能 不 能 像 主线 程 一 样 带 有 大 循环 和 消息 队列 呢 ? 能 ,请 看 下 节 
分 解 ! 


HandlerThread 


很 显然 HandlerThread 是 用 于 创建 线程 的 。 它 与 Thread 类 的 不 同 有 三 : 


(1) 它 内 部 已 经 实现 了 线程 方法 ， 所 以 不 需 我 们 Override 其 run() 方法 或 传 入 一 个 
Rannable 进去 。 

(2) 它 的 线程 方法 中 实现 了 大 循环 ， 并 且 它 具有 一 个 消息 队列 。 

(3) 类 名 不 一 样 〈 好 像 是 废话 ) 。 


于 是 ， 它 的 用 法 很 简单 : 创建 对 象 ， 然 后 局 动 ， 这 个 线程 就 开始 运行 了 。 有 代 人 码 为 证 : 


HandlerThread th = new HandlerThread("ht1"); 
th starttya 


其 构造 方法 有 一 个 String 参数 ， 用 于 为 这 个 线程 指定 一 个 名 字 。 线 程 启 动 后 ， 就 会 执行 
大 循环 ， 我 们 似乎 也 没有 指明 要 做 什么 ， 那 么 这 个 大 循环 不 是 在 空转 吗 ? 这 不 白白 耗费 CPU 
吗 ? 你 可 以 放心 , 不 会 的 ， 如 果 消 息 队 列 中 没有 消息 在 处 理 ， 这 个 线程 就 会 暂停 ， 直 到 进来 消 
恩 之 后 再 继续 执行 。 下 面 我 们 让 这 个 线程 做 点 事 ， 跟 UI 线程 一 样 ， 把 一 段 代 码 扔 给 它 就 行 ， 
扔 代码 依然 使 用 Handler， 代 码 如 下 : 


Handler handler = new Handler (th.getLooper ()); 


//FIBÉEREEREEKT- i ^ LI. 


handler.post (new Runnable() { 
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QOverride 
public void run() { 


// X ZBTUPISE BI EB 


与 向 主线 程 扔 代码 唯一 不 同 的 就 是 获取 Looper 的 方式 变 了 , 这 里 获取 的 是 HandlerThread 
的 Looper。 

当然 也 可 以 使 用 扔 消息 的 方式 在 HandlerThread 中 执行 代码 。 

了 解 了 多 线程 的 重要 概念 后 ， 束 可 以 读 懂 后 面 的 网 络 通信 内 容 了 。 对 于 多 线程 对 实践 ,我 
们 结合 网 络 通信 部 分 一 起 讲 。 


| Lo. y W 


线程 的 退出 是 容易 被 大 家 忽略 掉 的 , 但 其 实 这 很 重要 , 我 一 说 你 就 明白 了 。 新 线程 肯定 是 
在 某 个 Activity 中 创建 的 ， 那 么 这 个 Activity 在 销毁 时 ， 就 应 该 把 新 开 的 线程 停止 掉 ! AER 
行 不 ?根据 实际 情况 来 讲 ， 一般 也 是 没 问 题 的 ， 只 要 Activity 所 在 的 进程 存在 ， 那 么 线程 就 可 
以 运行 。 那 进程 什么 时 候 死 呢 ?” 当 运行 在 这 个 进程 中 的 所 有 组 件 (包括 Activity. Service 等 ) 
都 被 销毁 时 ， 这 个 进程 才 “ 有 可 能 ”会 死 ， 之 所 以 说 “有 可 能 ”， 主 要 与 内 存 有 关 ， 如 果 系 统 
内 存 不 够 用 了 ， 进 程 就 会 死 ， 如 果 很 够 用 ， 一般 就 不 会 死 。 由 于 当前 内 存 越 来 越 大 ， 所 以 死 的 
可 能 性 就 越 来 越 小 。 所 以 说 不 主动 停 掉 线 程 ， 线程 也 会 继续 活着 。 但 这 里 面 还 有 个 问题 ,线程 
可 能 在 Activity 销毁 后 又 扔 出 了 访问 UI 的 代码 ， 此 时 UI 不 存在 了 ， 肯 定 会 引起 骨 尝 。 所 以 ， 
不 论 实际 情况 如 何 ， 都 应 在 Activity 销毁 时 停止 在 Activity 中 所 开局 的 线程 。 

如 何 终止 一 个 线程 呢 ? 我 们 可 能 首先 想到 的 是 停止 线程 代码 ， 如 果 线 程 的 mn0 方 法 返回 
了 ， 那 么 线程 就 自然 结束 了 ， 这 是 线程 最 舒服 的 死 法 ,自然 死亡 ,一切 都 很 和 谐 ， 线 程 会 处 理 
好 后 事 ( 比 如 释放 内 存 、 关 闭 网 络 连接 等 ) 。 你 还 可 以 在 其 他 线程 中 谋杀 一 个 线程 ， 比 如 调用 
要 杀 死 的 线程 的 stop0 方 法 ， 也 可 以 调用 它 的 interrupt0 方 法 ， 这 两 者 有 所 区 别 , 但 是 都 会 造成 
线程 的 非 正 常 死 亡 ， 所 以 这 两 种 方法 是 不 推荐 使 用 的 。 其实 我 们 只 有 一 种 方法 可 选 : 让 线程 目 
然 死 亡 ! 严谨 来 说 应 该 是 让 线程 尽快 自然 死亡 ， 为 什么 说 “尽快 ” 呢 ? 因 为 很 多 时 候 做 不 到 让 
线程 “立即 ”死亡 。 

如 何 让 一 个 线程 快速 死亡 呢 ? 你 得 研究 一 个 线程 的 代码 ,其 执行 耗 时 是 多 少 。 这 还 得 分 有 
循环 和 无 循环 的 情况 ， 如 果 无 循环 ,你 要 研究 一 下 这 个 线程 执行 的 总 时 间 ， 如 果 它 每 次 执行 都 
能 保证 在 一 两 秒 内 完成 ，， 那 么 就 不 需要 对 这 个 线程 做 任何 处 理 ， 因 为 它 死 得 很 快 ， 虽然 一 两 
秒 对 CPU 是 很 长 的 时 间 ， 但 对 人 来 说 感觉 很 短 。 如 果 它 耗 时 超过 比较 长 的 时 间 ， 比 如 30 $5, 
那么 对 人 来 说 也 会 感觉 比较 长 ， 急 性 子 就 更 受 不 了 ， 此 时 就 要 仔细 研究 一 下 ， 哪 几 条 代码 比较 
耗 时 ， 有 什么 办 法 可 让 这 些 耗 时 的 操作 被 中 断 ， 只 有 从 耗 时 操作 中 出 来 ， 才 能 继续 往 下 执行 ， 
快速 结束 。 
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举 个 例子 ， 比 如 线程 B 中 有 一 步 是 阻塞 式 的 网 络 连接 ， 这 种 操作 有 时 非常 耗 时 ， 那 么 你 
在 线程 A 中 要 尽快 停止 线程 B 时 ， 束 应 该 考虑 调用 一 些 打 断 网 络 连接 过 程 的 方法 ， 让 线程 B 
中 的 网 络 连接 过 程 中 断 掉 ， 但 是 可 能 在 线程 A 中 调用 打 断 方法 时 ， 线 程 B 中 网 络 连接 这 一 步 
己 经 完成 了 ， 但 即使 这 样 ， 线 程 A 中 的 调用 也 是 必要 的 ， 因 为 我 们 无 法 预测 线程 B 中 的 网 络 
连接 到 底 何 时 开始 执行 ， 何 时 完成 。 其 实 最 好 的 方式 是 把 阻塞 式 网 络 调用 改 为 非 阻塞 式 ， 这 样 
就 有 办 法 做 到 快速 结束 线程 。 

在 有 循环 的 情况 下 ， 我 们 很 容易 想到 ， 可 以 在 另外 一 个 线程 中 , 改变 循环 所 检测 的 条 件 变 
量 的 值 〈 比 如 true 改 为 false)， 这 样 就 能 让 循环 很 快 退出 ， 循 环 退 出 了 ， 线 程 就 会 很 快 结束 。 
但 是 , 你 还 得 研究 一 下 每 次 循环 的 代码 中 有 没有 耗 时 的 操 做 昵 ? WRA, 除了 改变 循环 条 件 变 
量 外 ， 你 也 得 考虑 如 何 打 破 耗 时 的 操作 。 其 实 最 好 的 办 法 还 是 尽量 别 有 耗 时 的 操作 ， 把 阻塞 式 
调用 改 为 非 阻塞 式 ， 就 万 事 OK 了 。 

注意 你 必须 在 Activity 的 onDestroy0 中 等 竺 线程 的 结束 ， 以 保证 线程 退出 后 才 销 毁 
Activity， 如 何等 待 一 个 线程 结束 呢 ， 很 简单 ， 调 用 Thread 的 实例 方法 join0 即 可 ， 比 如 A 线 
程 要 等 待 了 线程 退出 ， 则 在 A 线程 中 调用 B 的 这 个 方法 ， 一 旦 调用 了 这 个 方法 ， 那 么 A 就 暂 
停 运行 ， 直 到 B 结束 ， 才 继续 运行 。 

下 面 在 我 们 的 MainActivity 中 加 入 等 待 线程 结束 再 退出 的 代码 .为 了 在 onDestroy0 中 访问 
所 创建 的 线程 对 象 ， 需 要 先 把 线程 变量 改 为 MainActivitity 的 成 员 变 量 : 


public class MainActivity extends AppCompatActivity { 


private Thread thread; 


然后 修改 创建 线程 的 代码 : 


/ / IAE Ei RFE EH 
findViewById (R.id.buttonStartThread).setOnClickListener( 
new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
/ / B2 ZG FREIE PAZ: ZH Rannable 
thread = new Thread (new Runnable() { 


再 为 Activity 创建 onDestroy0 方 法 ， 在 其 中 等 待 thread 的 结束 : 


QOverride 
protected void onDestroy() { 
/ / SEÉFEEFEIB HI 
try { 
thread.join(); 


} catch (InterruptedException e) { 
e.printStackTrace(); 


} 
super.onDestroy();//4420/H — FÁCA2SHSIR]I— Z7 24 


有 人 可 能 会 问 了 ， 如 果 在 用 join0 时 ，thread 已 经 结束 了 ， 会 发 什么 呢 ? 什么 也 不 会 发 生 ， 
join0 也 不 会 引起 所 在 线程 〈 这 里 是 主线 程 ) 暂停 。 
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网 络 通 信和 是 Android 开发 中 的 重要 技术 点 。 我 一 直 认 为 ， 一 个 新 手 只 要 学 会 了 网 络 通 信和 
ReyclerView， 就 可 以 信心 满 满 地 去 公司 打工 了 。 其 他 的 技术 点 呢 ? 边 做 边 学 员 。 

要 进行 网 络 开 有 发， 必须 具备 网 络 通信 的 基础 知识 ， 其 实 也 不 需要 太 多 ， 一 点 就 够 用 了 。 所 
以 下 面 我 们 先 讲 一 下 网 络 基础 知识 。 


网 络 基础 知识 


16.1.1 IP 地 址 与 域名 


把 一 台 设 备 加 入 到 网 络 中 , 它 自动 就 能 访问 网 络 上 的 资源 , 也 能 让 其 他 网 络 访问 到 这 台 设 
备 ， 这 是 怎么 做 到 的 呢 ? 

因为 互联 网 是 一 个 开放 的 系统 , 它 有 一 套 协议 ， 当 各 设备 都 遵守 这 套 协议 时 ， 它 们 就 能 发 
现 对 方 并 彼此 连接 。 互 联网 中 设备 这 么 多 ， 必 须 有 一 个 编号 方案 ， 为 每 台 设 备 设 置 一 个 唯一 的 
编号 , 才能 区 分 各 设备 , 这 个 编号 就 是 P 地 址 。 IP 地 址 看 起 来 是 这 个 样子 :“61.135.169.111”， 
但 实际 上 它 是 一 个 整数 ， 只 不 过 为 了 某 些 原因 表示 成 这 样 。 你 要 访问 网 络 上 的 一 台电 脑 时 ， 必 
须 指 定 它 的 卫 地 址 。 但 有 时 我 们 看 到 的 不 是 卫 地 址 ， 比 如 我 要 访问 Github 这 个 网 站 的 主页 ， 
输入 的 是 这 样 的 地 址 ， 如 图 16.1.1.1 所 示 。 


C H8  & http;//github.com 


16.1.1.1 


这 个 地 址 叫 URL, 由 两 部 分 组 成 “http:/ ”这 部 分 表示 协议 “http ?是 协议 名 ，“github.com” 
是 域名 ， 指 回 要 访问 的 服务 器 。 这 看 起 来 可 不 像 卫 地 址 啊 ? 是 的 , 这 不 是 他 地址 ,这 是 域名 ， 
域名 其 实 是 IP 地 址 的 别名 ， 因 为 IP 地 址 对 人 来 说 不 好 记 ， 所 以 大 家 就 说 为 IP 地 址 取 个 别名 
吧 ， 让 人 容易 记 住 ， 所 以 就 搞 出 了 一 个 叫 作 域名 服务 器 的 东西 ， 当 一 台 设 备 不 知道 域名 对 应 的 
IP 地 址 时 ， 就 去 域名 服务 器 问 一 下 ， 得 到 IP 地 址 后 ， 以 了 PP 地 址 建立 网 络 连 接 。 
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16.1.2. TCP 5 UDP 


网 络 是 由 一 个 个 设备 与 设备 间 的 连接 组 成 的 , 两 个 设备 间 通 信 时 , 限于 硬件 的 能 力 以 及 其 
他 原因 ， 数 据 必 须 分 成 一 小 块 一 小 块 地 进行 传送 ， 多 小 呢 ? 不 超过 1500 字 节 ! 如 果 你 传送 1M 
字 节 ， 它 其 实 被 底层 API 分 割 成 了 多 个 小 块 ， 而 这 些小 块 在 传送 过 程 中 要 经 过 多 个 设备 才能 
到 达 目 标 设备 ， 由 于 是 一 张 网 ， 每 个 小 块 所 经 过 的 路 径 可 能 与 其 他 不 同 , 所 以 无 法 保证 先 发 的 
小 块 一 定 比 后 发 的 小 块 更 早 到 达 目 标 设备 , 这 就 需要 对 方 收 到 之 后 要 对 小 块 进行 排序 。 甚 至 有 
可 能 某 个 小 块 走 丢 了 , 根本 到 不 了 目标 设备 ， 那 就 需要 重 发 这 个 小 块 。 也 有 可 能 发 送 端 设备 运 
行 快 ， 接 收 端 设备 运行 慢 ， 对 发 来 的 数据 来 不 及 收 ， 这 就 需要 两 边 进行 同步 …… 你 看 到 了 吧 ， 
有 这 么 多 问题 需要 解决 。 

TCP 和 UDP 是 网 络 传输 协议 , 用 于 保证 数据 传输 的 ， 以 上 那些 问题 , TCP 都 帮忙 解决 了 ， 
而 UDP 基本 上 都 没 解决 。 所 以 要 保证 你 的 数据 被 对 方 收 到 ， 你 们 之 间 应 建立 TCP 连接 。UDP 
也 有 它 的 用 武之 地 ， 因 为 有 些 时 候 ， 是 允许 丢失 数据 的 。 比 如 视频 聊天 ， 双 方 要 传送 音 视频 数 
据 , 保证 音 视频 的 实时 性 比 保 证 完整 性 更 重要 ,所 以 允许 丢掉 部 分 数据 ， 数据 丢失 时 就 会 看 到 
马赛 克 。 

Android 提供 了 利用 TCP/UDP 进行 网 络 通信 的 API, 利用 这 些 API 编程 叫 作 Socket 编程 。 


16.1.3 HTTP 协议 


HTTP 是 超 文本 传输 协议 ， 主 要 用 于 传输 文本 的 〈 超 文本 还 是 文本 ) ， 但 后 来 也 能 传输 二 
进 制 数据 了 。 它 可 以 传输 任何 格式 的 文本 ， 当 然 主 要 是 传输 HTML LE, EREN, HF 
网 页 是 不 能 有 数据 丢失 的 ， 所 以 HTTP 是 建立 在 TCP 之 上 的 协议 。 实 际 上 HTTP 并 不 能 传输 
数据 ， 它 只 是 规定 了 数据 打包 的 结构 ， 数 据 包 利用 TCP 进行 传输 ， 所 以 它 是 建立 在 传输 层 之 
上 的 ， 它 是 应 用 层 协 议 。 

HTTP 包 结 构 由 包头 和 喘 体 两 部 分 组 成 ， 里 面 的 文本 数据 都 是 key-value 的 形式 ， 电 脑 能 
处 理 ， 人 也 能 看 懂 。 细 节 我 就 不 多 说 了 ， 网 上 有 太 多 关于 它 的 文章 。 

Android 提供 了 利用 HTTP 进行 网 络 通 信和 的 API, 我 们 习惯 把 它们 直接 叫 作 网 络 通信 API， 
相对 于 它们 来 说 ，Socket API 是 底层 API，HTTP API 建立 在 Socket API 之 上 。 

浏览 器 访问 服务 端的 一 个 网 页 ， 是 通过 一 次 HTTP 请 求 完成 的 。 其 过 程 是 这 样 的 : 

CD 用 户 在 浏览 器 的 地 址 栏 输入 网 页 地 址 (如 http://github.com) ， 浏 览 器 向 服务 器 发 出 
TCP 连接 请 求 ， 与 服务 端 建立 连接 ; 

(2) 浏览 器 将 网 页 地 址 和 其 他 参数 打包 到 一 个 HTTP 包 中 ， 将 这 个 包 发 给 Web 服务 器 ; 

(3) 服务 器 收 到 之 后 ， 根 据 网 页 地 址 中 的 路 径 和 参数 决定 为 浏览 器 返回 哪个 网 页 ; 

(4) 服务 器 将 网 页 内 容 (HTML 文本 ) 打 成 HTTP 包 发 给 浏览 器 ; 

(5) 浏览 器 收 到 回应 包 后 ， 取 出 其 中 的 HTML 文本 ， 解 析 后 显示 出 网 页 ; 

(6) 浏览 器 关闭 连接 。 


每 请 求 一 个 网 页 ， 浏览 器 总 是 执行 “建立 连接 一 传送 数据 一 关闭 连接 ”的 过 程 ,每 次 请 求 
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之 间 互 不 相关 ,所 以 HITP 请 求 是 无 状态 的 ,要 想 让 对 同一 个 服务 器 的 多 次 请 求 之 间 产 生 关 联 ， 
需要 服务 器 提供 额外 的 支持 ， 比 如 Session 对 象 ， 这 属于 Web 开发 的 概念 ， 在 此 不 深入 讨论 。 


Android HTTP 通信 


HTTP 协议 当然 不 仅仅 用 于 传输 HTML 文本 ， 任 何 文 本 它 都 可 以 传输 ， 而 且 前 面 说 过 ， 
它 还 可 以 传输 二 进 制 数 据 。 

我 们 可 以 使 用 Java 中 提供 的 HITP 通信 API 直接 访问 Web 服务 器 , 获取 网 页 并 显示 出 来 ， 
这 需要 用 到 控件 WebView 来 显示 网 页 。 

下 面 我 们 就 用 一 个 小 例子 玩 一 下 Andriod 显示 网 页 。 

依然 利用 我 们 前 面 创建 的 项 目 ThreadDemo, 在 其 MainActivity 的 Layout 中 增加 一 新 的 按 
钮 ， 取 名 “访问 网 页 ”，id 为 “buttonWebPage”， 啊 应 这 个 按钮 ， 在 其 中 创建 线程 ， 在 线程 
中 访问 一 个 网 页 ， 并 保存 下 得 到 的 HTML 文本 。 直 接 上 代码 : 


findViewById (R.id.buttonWebPage).setOnClickListener( 
new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
//BJ& EFE, INA 


new Thread (new Runnable() { 


QOverride 
public void run() { 
testGetHTML(); 
} 
Tion CAFC) 


网 络 访问 的 代码 被 封装 到 了 方法 testGetHTMLO 中 ， 下 面 是 这 个 方法 的 代码 : 


private void testGetHTML() í( 
try { 

URL urlObj - new URL("https://cn.bing.com"); 

HttpURLConnection connection - (HttpURLConnection) 
urlObj.openConnection(); 

/ TE, E pE R TERI 

connection.connect(); 

InputStream is - connection.getInputStream(); 


IFZ, UFRR 

byte[] buffer = new byte[4096]; 

StringBuffer stringBuffer-new StringBuffer(); 
int ret = is.read(buffer); 

S/R FKit TAUA 4096 ZFP, RMB StringBuffer 由 
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while(ret»-0) { 
/ L| MK AE I XC IE E SARI 
if (ret > 0) { 
/ / PINK EE 3 IHE HTML XE, Dr UWRF I TIE 
String html = new String (buffer, 0, ret); 
// Hs id — F 
Log.i("html",html); 


stringBuffer.append (html); 
ret — is.read(buffer); 


} 
} catch (IOException e) { 
e.printStackTrace(); 


为 什么 要 在 线程 中 访问 网 页 ?还 记得 前 面 讲 的 禁忌 吗 ? 不 能 在 UI 线程 之 外 访问 UL 因为 
我 们 后 面 将 要 把 HTML. 文本 设置 给 WebView。 

testGetHTMLO 方 法 并 不 难 理解 ， 主 要 做 了 两 件 事 ， 一 是 连接 服务 器 ， 二 是 从 服务 器 读 取 
数据 。 

连接 过 程 是 这 样 的 : 先 创建 一 个 URL 对 象 ， 利 用 URL 对 象 获取 连接 对 象 (connection ) ， 
调用 connection 的 connect0 方 法 连接 服务 器 。 连 接 成 功 之 后 利用 输入 流 从 服务 器 读 入 数据 。 

读 取 数 据 的 过 程 主要 是 一 个 循环 ， 我 们 不 知道 到 底 能 读 取 多 少数 据 ， 所 以 开 了 一 个 4096 
字 节 的 缓存 ， 每 次 最 多 读 入 4096 字 节 ， 直 到 不 再 有 数据 可 读 ， 跳 出 循环 。 为 了 看 到 读 到 的 数 
据 ， 我 在 循环 中 用 Log 输出 了 它们 。 运 行 App， 点 击 “ 访 问 网 页 ”按钮 ， 之 后 在 日 志 窗 口中 
可 以 看 到 读 出 的 数据 ， 是 一 段 HTML 代码 (注意 你 的 测试 设备 必须 能 上 网 ! ) ， 如 图 16.2.1 
所 示 。 


si ST=new Date 

//]]»«/script»«script type-"text/javascript"»//«l[cpATA[ 

0;,0;0; G-(ST:(si ST?si ST:new Date),Mkt:"zh-CN",RTL:false,Ver:;"19",T16G: "F98947C7FFD744ABAFBQ 
//]]»«/script»«style types2"text/css"»z(a:1]body.hp(background: $600; color:s&fff;margin:8;fon 
ight:32px;width:82px;position:absolute)iCorelayer imheader[width:1009$;padding:0;background 
aRptTmvtbYlu6T8w«Odbq3nr8R9sfD5wOPF 15SvNUyWna6YL Tk2fyz4yd1719f1753GDbor7752P0320Pb--& 6EHThG 
as icon(background-image:url(data:image/png;base64,iVBORWwOKGgOAAAANSUhEUEAAABBAAAAQdCAMAAAB 
tLyLGwcTAiNiQIMnnpDgAhDOQDN4BRXADknw--KemF 1 ISFHBJbSE3t1HAACKC jWbYAiGcj8fPIya7k509YIHGHZPF7I6 
var amd,define,require;(function(n)(function e(n,i,u)(t[n]||(t[n]2-(dependencies:i,callback 
e-function(n)[return d.getElementById(n)), qs-function(n,t)[return t-typeof t--"undefined 
lement:n.relatedTarget]function sj mo(n)[return sb i81l?event.toElement:n.relatedTarget ]funq 
move" ,"touchmove" , "scroll","keydown" ,"resize"];n.wireup(t,[load:f,compute:null,unload:e]))) 
perf;(function(n)[function f(n)(return i.hasOwnProperty(n)?i[n]:n)function e(n)[var t-"S"; 
fire,n.onbeforefire-function()[t&&t() ;u() ;n. mark(r,1))):(t-si PP,si PP-function()(u() ;var 
//]]»«/script»«title»í4k Bing 搜索 - 国内 版 </title><meta http-equiv-" Content-Type" content 
var sj b= d.body; G.AppVer-"8 1 2 6199207"; var H-(); H.mkt = "zh-CN"; H.trueMkt = "zh-C 
//]]»«/script»«a id-"mHamburger" class="b hphb b hide" tabindex-"e" aria-label-" H Ħ" role 
S5dy/1ntwrJym7ft2JXxKKDB-Xecy4XwIYeSnpTXxBT8sotNGk4«znDvr2ujt21EU7NwJ158jzVevUuTnrvuBpAAKYV1ng 
U50e1T1/A4cFBgqsoDe735M79GzPw«T j7poitnRFsIOULVKSEuh jAenVxPhduDsZQUr 186L 20TMS9dgp84mVrJEbJbgx 
$ «/div»«/div»«/a»«/li»«/div»«/div»«/div»«div id-"hp mobile" data-ajaxiid-"sea4" data-da 
DbHj2MV7DOKp5zGOsihFU3V7rAkZSYSueMaL -ifDDdlRg--NXWMLIKn3wF2TOhvdoNgfQfvfHHPU3pAPpYjo49X1lqrH 


16.2.1 


这 说 明 HTTP 通信 成 功 了 。 下 一 步 我 们 就 可 以 把 这 些 HTML 源码 设置 给 WebView 控件 以 
显示 出 这 个 网 页 。 但 是 ， 我 们 并 不 把 WebView 直接 添加 到 当前 页 面 中 ， 而 是 新 启动 一 个 页 面 
(Activity) ， 在 新 页 面 中 藤 一 个 WebView， 由 它 来 显示 这 个 网 页 。 下 面 我 们 在 testGetHTML() 
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中 添加 这 部 分 代码 : 


private void testGetHTML() { 
try { 

URL urlObj - new URL("https://cn.bing.com"); 

HttpURLConnection connection - (HttpURLConnection) 
urlObj.openConnection(); 

//XEÍTAERE, A pE R FERT 

connection.connect(); 

InputStream is = connection.getInputStream(); 


SIFRE, UFRR 
byte[] buffer = new byte[4096]; 
StringBuffer stringBuffer-new StringBuffer (); 
int ret = is.read (buffer); 
//R, Fikh TA 4096 FË, RUMP StringBuffer 'F 
while(ret»-0) { 
// MRR i X CA E SAPE 
if (ret > 0) { 
/ / LPS A A OK HTML XU, Mr UREE M TIIA 
String html = new String (buffer, 0, ret); 
// Hs d — FF 
Log.i("html",html); 
stringBuffer.append (html); 
ret = is.read(buffer); 


//M stringbuffer PRAA HTML 
final String allHtml - stringBuffer.toString(); 
// TUFIEI Activity PIDA UI ZEFEPRA T, IE AER 
Handler handler = new Handler(MainActivity.this.getMainLooper()); 
handler.post(new Runnable() { 
QOverride 
public void run() { 
// FAIT activity, rA 
//f&l/&& Intent 
Intent intent = new Intent (MainActivity.this, WebActivity.class); 
intent.putExtra("html", allHtml); 
// HZ] Activity 
startActivity (intent); 
} 
)); 
) catch (IOException e) { 
e.printStackTrace(); 


在 循环 之 后 ， 增 加 了 启动 WebActivity 的 代码 。 因 为 Activity 也 属于 UI， 所 以 将 这 部 分 代 
码 “ 扔 ”到 了 主线 程 中 执行 。 注 意 HTML 代码 被 放 到 了 Intent 中 进行 传送 。 毫 无 疑问 ， 我 们 
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还 需 增 加 WebActivity， 然 后 在 它 的 Layout 中 添加 WebView 并 设置 id 为 “webView”。 在 
WebActivity 中 取出 HTML 代码 并 设置 给 WebView， 代 但 如 下 : 


GOverride 

protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity web); 
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
setSupportActionBar (toolbar); 


FloatingActionButton fab - (FloatingActionButton) findViewById(R.id.fab); 
fab.setOnClickListener(new View.OnClickListener() { 


QOverride 
public void onClick(View view) { 
Snackbar.make(view, "Replace with your own action", 
Snackbar.LENGTH LONG) 
.SetAction("Action", null).show(); 


)); 


Intent intent - getIntent(); 

String html - intent.getStringExtra ("html"); 
WebView webView = findViewById(R.id.webView); 
webView.loadData (html,"text/html","utf8"); 


Tf HTML 代码 设置 给 WebView 是 通过 调用 其 方法 loadData0 搞 定 的 ， 它 的 第 一 个 参数 是 
数据 ， 即 HTML X; 第 二 参数 是 数据 的 格式 ， 以 MIME 类 型 表示 法 说 明 类 型 ， 第 三 个 参数 
是 数据 的 编码 ， 首 选 UTF8。 运 行 App， 点 击 “ 访 问 网 页 ”按钮 ， 过 一 会 就 会 进入 新 页 面 ， 显 
示 出 一 个 网 页 ， 有 图 为 证 (如 图 16.2.2 所 示 ) 。 


WebActivity 


切换 至 国际 版 


百 捷 全 球 葛 文 信 息 


16.2.2 
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使 用 "ERE HEIZ " 


异步 任务 与 网 络 没 有 关系 ， 只 是 一 种 多 线程 调用 的 处 理 模型 。 使 用 它 ， 省 去 了 我 们 在 线程 
间 “ 扔 ”代码 的 操作 了 。 虽 然 使 用 率 不 高 ， 但 由 于 是 Android 官方 提供 的 ， 所 以 有 必要 稍微 
Look 一 下 。 要 使 用 异步 任务 ， 需 要 从 AsyncTask 类 派生 一 个 类 ， 然 后 Override 几 个 回调 方法 。 
重要 的 是 搞 清楚 这 些 方法 在 哪个 线程 中 运行 ， 以 放置 合适 的 代码 。 


16.3.1 定义 异步 任务 类 


AsyncTask 是 一 个 范 型 ， 它 的 子 类 需要 在 定义 时 传 入 三 个 类 型 作为 其 参数 ， 三 个 类 型 的 作 
用 可 以 从 AsyncTask 类 的 定义 中 看 出 来 : 


public abstract class AsyncTaskķParams] 1 


第 一 个 参数 是 任务 所 需 参 数 的 类 型 ; 第 二 个 参数 是 任务 进行 过 程 中 ,用 于 表示 进度 的 类 型 ; 
第 三 个 参数 是 任务 得 到 的 结果 的 类 型 。 比 如 我 们 创建 一 个 从 网 上 下 载 图 像 的 任务 , 使 用 它 一 次 
下 载 多 个 图 像 ， 每 次 所 下 载 的 图 像 们 的 URL， 就 可 以 做 为 这 个 任务 的 参数 ， 于 是 第 一 个 参数 
就 是 String 类 型 (注意 虽然 传 的 是 多 个 地 址 , 但 这 里 的 类 型 的 确 是 “String” 而 不 是 “String[]”， 
这 个 后 面 看 到 示例 代码 就 会 明白 ) ; 第 二 个 参数 表示 当前 任务 进度 的 类 型 ， 比 如 一 次 下 载 10 
个 图 片 ， 每 下 载 一 个 进度 +1， 进 度 用 一 个 整数 表示 即 可 ， 所 以 此 情况 下 此 参数 就 是 Pt 类 型 ; 
这 个 任务 会 下 载 10 个 图 片 ， 这 就 是 任务 的 结果 ， 所 以 第 三 个 参数 应 该 是 “Bitmap[]”( 注 意 
这 里 必须 是 数组 了 ， 跟 任务 参数 不 一 样 ) 。 下 面 就 用 代码 具体 演示 一 下 。 

首先 定义 一 个 异步 任务 类 的 骨架 看 一 下 : 
class HttpAsyncTask extends AsyncTask«String,Integer,Bitmap[]|^í 

//UI REFAIT 

QOverride 


protected void onPreExecute() { 


) 


// FÉEEEBIPA KT 


QOverride 


protected Bitmap[] doInBackground(String... strings) { 


return null; 


) 


//UI Z&£fE'PAÉT 
QOverride 


protected void onPostExecute(Bitmap[] result) { 


) 


我 们 Override 了 三 个 方法 ， 当 然 还 可 以 Override 其 他 方法 ， 但 一 般 不 会 复杂 到 那 种 程度 ， 
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所 以 我 只 讲 最 常用 的 这 几 个 方法 。onPreExecute0 在 UI 线程 中 执行 ,用 于 在 任务 执行 前 做 准备 ， 
主要 是 UI 方 面 的 准备 ,比如 设置 进度 条 总 值 和 步 进 值 。doInBackgroundO 方 法 从 名 字 就 能 判断 
出 其 在 后 台 线 程 中 运行 ， 也 就 是 任务 的 主体 部 分 ， 在 这 个 方法 中 可 以 做 耗 时 的 操作 。 
onPostExecute0 根 据 名 字 来 看 ， 是 在 任务 执行 完 后 调用 ， 它 也 是 在 UI 线程 中 执行 ， 一 般 用 于 
把 结果 设置 到 View 中 。 

范 型 参数 1 对 应 到 doInBackground0 的 参数 ， 注 意 此 方法 是 可 变 参 数 ， 所 以 我 们 可 以 传 入 
多 个 同类 型 的 实 参 ， 所 以 我 前 面 说 如 果 要 给 任务 传 入 多 个 参数 时 , 不 需 指定 为 数组 类 型 。 这 个 
方法 是 Android 框架 调用 的 ， 我 们 不 能 直接 调用 , 但 它 的 参数 却 是 我 们 指定 的 ， 这 是 怎么 做 到 


} 
注意 它 的 参数 ， 其 实 正好 对 应 doInbackground0 方 法 的 参数 。 所 以 我 们 启动 一 个 异步 任务 
时 传 入 的 参数 最 终 都 传 给 了 doInbackground()。 
范 型 参数 2 在 这 段 代 码 中 体现 不 出 来 。 
范 型 参数 3 对 应 到 doInBackgroud0 的 返回 类 型 和 onPostExecute0 的 参数 类 型 ,这 很 好 理解 ， 
任务 在 后 执行 完 后 产生 的 结果 , 应 该 传 给 主线 程 处 理 , 而 onPostExecute0 就 是 在 主线 程 中 执行 。 


16.3.2 ”使 用 异步 任务 类 
如 何 使 用 这 个 类 了 呢 ， 很 简单 ， 创建 实例 ， 调用 其 execute() 方 法 ， 代码 如 下 : 


HttpAsyncTask asyncTask-new HttpAsyncTask(); 
asyncTask.execute( 


"http 


"http: 
"http: 
"NEED: 


"hÜrLpe 
"http: 
"hELp: 
nee 
"hUrtp. 


: / / www. 


/ /www . 
/ /www . 
/ / WWW. 
/ / WWW. 
/ / WWW. 
/ / WWW. 
/ / WWW. 
/ / WWW. 


tucoo. 


tucoo 


tucoo. 


tucoo 


tucoo. 


tucoo 


tucoo. 


tucoo 
tucoo 


com/photo/water 02/s/water 05102s.;j 


.com/photo/water 02/s/water 05203s. 


com/photo/water 02/s/water 05304s. 


.com/photo/water 02/s/water 05405s. 


com/photo/water 02/s/water 05506s. 


.com/photo/water 02/s/water 05607s. 


com/photo/water 02/s/water 05708s. 


.com/photo/water 02/s/water 05809s. 
.com/photo/water 02/s/water 05910s. 


我 为 execute) A Y 10 个 图 像 URL 地 址 的 字符 串 ( 有 可 能 你 看 到 此 文 时 这 些 地 址 已 经 失 
效 了 ) ， 这 些 参数 最 终 会 传 给 doImBackground0， 这 段 代 码 必须 在 主线 程 中 调用 ， 比 如 我 们 可 
以 在 啊 应 某 个 按钮 。 下 面 我 们 实现 一 下 doInBackground(): 


QOverride 


protected Bitmap[] doInBackground(String... strings) { 


/ / IK EE ERE, RECETRIBIBIEIÓR 
for (String urlstr :strings)í 
try | 
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// H1 2 BÍ URL FIIR OÆ URL HR 

URL urlObj = new URL(urlstr); 

HttpURLConnection connection - (HttpURLConnection) 
urlObj.openConnection(); 

// EÍTAESR, A hE R TEM] 

connection.connect(); 

InputStream is - connection.getInputStream(); 

//M InputStream IZA E HRE h fir Ég 

Bitmap bitmap = BitmapFactory.decodeStream(is); 

Log. i ("task", "bitmap 
width="+bitmap.getWidth ()+" ,height="+bitmap.getHeight ()); 

} catch (IOException e) { 
e.printStackTrace(); 


return null; 


我 们 下 载 了 每 个 URL 所 指向 的 图 像 , 然后 解码 成 位 图 , 然后 在 日 志 中 输出 它们 的 宽 和 高 。 
运行 后 可 以 在 Logcat 窗口 中 看 到 这 样 的 日 志 ， 如 图 16.3.2.1 所 示 。 


wa- asynctask 
.threaddemo I/asynctask: g „width=474 ,height=718 


.threaddemo I/asynctask: got Wwidth-474,height-474 
.threaddemo I/asynctask: got Wwidth-474,height-245 
.threaddemo I/asynctask: got Width-474,height-315 


.threaddemo I/asynctask: got Width-474,height-355 
.threaddemo I/asynctask: got width-474,height-355 
.threaddemo I/asynctask: got Width-474,height-315 
.threaddemo I/asynctask: got „width=474 ,height=306 
.threaddemo I/asynctask: got Wwidth-474,height-355 
.threaddemo I/asynctask: got Width-474,height-632 


1632.1 


说 明 下 载 成 功 了 。 


16.3.3 ”完善 异步 任务 类 


还 有 两 个 方法 没有 实现 ， 一 是 onPreExecute0， 我 们 在 其 中 只 需要 准备 进度 条 控件 即 可 ， 
其 余 也 就 没什么 事情 可 做 了 ,但 我 们 要 先 准备 好 进度 条 控件 。 其 次 是 onPostExecute0， 在 其 中 
把 传 入 的 Bitmap 们 设置 到 图 像 控 件 中 显示 即 可 , 但 我 们 也 需 先 准 备 好 10 个 图 像 控 件 。 所 以 我 
们 先 改 一 下 Activity 的 Layout 设计 ， 改 为 这 样 〈 如 图 16.3.3.1 所 示 ) o 
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ThreadDemo 


显示 提示 创建 线程 访问 网 页 


16.3.3.1 


<?xml version-"1.0" encoding-"utf-8"?» 


«android.support.constraint.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
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xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 

android:layout height-"match parent" 
tools:context-".MainActivity"» 


«Button 
android:id-"8-c*id/buttonShowTip" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:text=" 显 示 提 示 " 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 


«Button 
android:id-"Q-c*id/buttonStartThread" 
android:layout width-"wrap content" 


android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:text=" 创 建 线程 " 


app:layout constraintStart toEndOf="@+id/buttonShowTip" 
app:layout constraintTop toTopOf-"parent" /» 
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«Button 
android:id-"8-cid/buttonWebPage" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:text=" 访 问 网 页 " 
app:layout constraintStart toEndof="@+id/buttonstartThread" 
app:layout constraintTop toTopOf-"parent" /> 


«ProgressBar 
android:id-"*id/progressBar" 
style-"?android:attr/progressBarStyleHorizontal" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
android:layout marginEnd-"8dp" 
android:layout marginStart-"8dp" 
android:layout marginTop-"ló6dp" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"8-id/buttonStartThread" /> 


«TableLayout 
android:layout width-"Odp" 
android:layout height-"0Odp" 
android:layout marginBottom-"8dp" 
android:layout marginEnd-"8dp" 
android:layout marginStart-"8dp" 
android:layout marginTop-"ló6dp" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"G8-c-id/progressBar"» 


«TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" » 


«ImageView 
android:id-2"8-4id/imageView2" 
android:layout width-"1l00dp" 
android:layout height-"100dp" /> 


«ImageView 
android:id-"8-4id/imageViewl" 
android:layout width-"l00dp" 
android:layout height-"100dp" /> 


«ImageView 
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android:id="@+id/imageView6" 
android:layout width-"l00dp" 
android:layout height-"100dp" /> 


«/TableRow» 


«TableRow 
android:layout width-"match parent" 
android:layout height-"match parent"» 


«ImageView 
android:id-2"8-cid/imageView3" 
android:layout width-"l00dp" 
android:layout height-"100dp" /> 


«ImageView 
android:id-2"8-cid/imageView4" 
android:layout width-"l00dp" 
android:layout height-"100dp" /> 


«ImageView 
android:id-"Q8-cid/imageView5" 
android:layout width-"l00dp" 
android:layout height-"100dp" /> 


«/TableRow» 


«TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" 


«ImageView 
android:id="@+id/imageView7" 
android:layout width-"l00dp" 
android:layout height-"100dp" /> 


«ImageView 
android:id-2"8-4id/imageView8" 
android:layout width-"l00dp" 
android:layout height-"100dp" /» 


«ImageView 
android:id-2"8-4id/imageView9" 
android:layout width-"l00dp" 
android:layout height-"100dp" /> 


«/TableRow» 


«TableRow 
android:layout width-"match parent" 
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android:layout height= "match parent" > 


«ImageView 
android:id-"8-cid/imageViewlO" 
android:layout width-"l00dp" 
android:layout height-"100dp" /» 

«/TableRow» 
«/TableLayout» 
«/android.support.constraint.ConstraintLayout» 


ProgressBar 是 进度 条 ， 其 id 为 progressBar, 10 个 图 像 控 件 放 在 了 一 个 TableLayout 中 ， 
它们 的 id 从 imageViewl 到 imageView10 。 这 些 控件 对 应 的 变量 也 要 创建 为 Activity 的 成 员 
变量 ， 代 码 如 下 : 

public class MainActivity extends AppCompatActivity { 


private ProgressBar progressBar; 
private ImageView[] imageViews-new ImageView[10]; 


它们 的 初始 化 在 Activity 的 onCreate()"P: 


/ IFEA PARKENT 
progressBar = findViewById(R.id.progressBar); 


imageViews [0] 
imageViews[i] 
imageViews [2] 
imageViews[3] 
imageViews[4] 
imageViews[5] 
imageViews[6] 
imageViews[/] 
imageViews[8] 


= findViewById (R. 
findViewById (R. 
findViewById (R. 
findViewById (R. 
findViewById (R. 
findViewById (R. 
findViewById (R. 
findViewById (R. 
findViewById (R. 


id.imageViewl); 
id.imageView2); 
id.imageView3); 
id.imageView4); 
id.imageView5); 
id.imageViewó); 
id.imageView7); 
id.imageView8); 
id.imageView9); 


imageViews[9] = findViewById(R.id.imageView10); 


下 面 实现 异步 任务 类 的 onPreExecute(). 在 其 中 只 需 做 初始 化 进度 条 的 工作 , 但 有 个 问题 ， 
我 们 需要 知道 调用 executeO0 时 传 入 的 URL 的 数量 ， 才 能 设置 好 进度 总 值 ， 所 以 我 们 应 该 增加 
一 个 市 参数 的 构造 方法 ， 参 数 就 是 URL 的 数量 ， 于 是 修改 任务 类 ， 增 加 如 下 代码 : 


class HttpAsyncTask extends AsyncTask<String, Integer,Bitmap[]>{ 
private int taskNum-0; 


public HttpAsyncTask(int taskNum)(í 
this.taskNum-taskNum; 


) 


现在 可 以 实现 onPreExecute() 了， 很 简单 : 
//UI FE fÍT 


QOverride 


protected void onPreExecute() { 
progressBar.setMax(taskNum); 


} 
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再 实现 onPostExecute(): 


//UlI REFUI 
QGOverride 
protected void onPostExecute(Bitmap[] bitmaps) { 
if (bitmaps--null)(í 
return; 


} 

// FNR RAR Bt SII vf) ImageView 中 

for (int i-0;i«imageViews.length;i--*)Í( 
imageViews [i] .setImageBitmap (bitmaps [i]); 


} 


doInBackground0) 需 要 修改 ， 才 能 与 上 面 两 个 方法 配合 起 来 : 
/ LE EEEUPAOÍT 


QOverride 
protected Bitmap[] doInBackground(String... strings) { 
Bitmap[] bitmaps = new Bitmap[strings.length]; 


/L KITE BS, TREHI R 
for (int i-0;i«strings.length;i--*)í 
try { 
// Hi ZR URL EfTABÉIJ& URL HR 
URL urlObj = new URL(strings[i]l); 
HttpURLConnection connection - (HttpURLConnection) 
urlObj.openConnection(); 
//XEÍTAEBG 1X — P RIBEdEB TERI 
connection.connect(); 
InputStream is - connection.getInputStream(); 
//M InputStream ZA %tE HRES MI fr Fg 
Bitmap bitmap - BitmapFactory.decodeStream(is); 
/ / IE SII IEEE DP 
bitmaps[i]-bitmap; 
/ / AUTE EGER EUER EE, i MoR BIDUEEII 
publishProgress (i-*1); 
} catch (IOException e) { 
e.printStackTrace(); 
return null; 


) 


//X& [8] Bitmap ŽA 


return bitmaps; 


最 后 返回 Bitmap 数组 ， 在 循环 中 ， 每 下 载 一 个 图 像 ， 都 更 新 一 下 进度 条 ， 当 然 不 是 直接 
更 新 ， 而 是 调用 方法 publishProgressO 通 知 主线 程 ， 由 主线 程 更 新 进度 条 。 但 是 主线 程 现在 更 
新 不 了 进度 条 ， 因 为 我 们 还 需要 在 异步 任务 类 中 实现 一 个 回调 方法 onProgressUpdate()， 此 方 
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法 在 主线 程 中 执行 ， 代 码 如 下 : 


QOverride 
protected void onProgressUpdate(Integer... values) { 


progressBar.setProgress(values[0].intValue()); 


现在 可 以 运行 试 一 下 了 ， 结 果 如 图 16.3.3.2 所 示 。 


显示 提示 创建 线程 访问 网 页 


图 16.3.3.2 
异步 任务 类 最 终 的 代码 如 下 : 


class HttpAsyncTask extends AsyncTask«String,Integer,Bitmap[]l^í 
private int taskNum-0; 


public HttpAsyncTask(int taskNum)(í 
this.taskNum-taskNum; 


//UI EFE'FIAÉT 

QOverride 

protected void onPreExecute() { 
progressBar.setMax(taskNum); 


/ / i A RIEP AIT 

QGOverride 

protected Bitmap[] doInBackground(String... strings) { 
Bitmap[] bitmaps = new Bitmap[strings.length]|; 


/ LOCA NRI FR ETSIIKE 
for (int i-0;i«strings.length;i--*)í( 
try { 
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// H1 2 BÍ URL FFR JÆ URL HR 

URL urlObj = new URL(strings[i]); 

HttpURLConnection connection - (HttpURLConnection) 
urlObj.openConnection(); 

//XEÍTIERE, AX — PU GETER FER] 

connection.connect(); 

InputStream is = connection.getInputStream(); 

//M InputStream IZA 24 E HRE 4I fr Eg 

Bitmap bitmap - BitmapFactory.decodeStream(is); 
is.close(); 


MA €: POPE E BU 
bitmaps[i]-bitmap; 
/ / ALLE PEE E ELS AES, i MoFA, PEE 
publishProgress (i-1); 
} catch (IOException e) { 
e.printStackTrace(); 
return null; 


} 


//3&[H] Bitmap Zf£H 


return bitmaps; 


) 


//UI £g PTT 
QOverride 
protected void onPostExecute(Bitmap[] bitmaps) { 
if (bitmaps--null)(í 
return; 
] 
// TESEAIETR ATTIC BE SIN] Iv] ImageView 办 
for (int i-0;i«imageViews.length;i-*-*)í 
imageViews [i] .setImageBitmap (bitmaps[i]); 
} 
} 


QOverride 
protected void onProgressUpdate(Integer... values) { 
progressBar.setProgress(values[0].intValue()); 


) 


现在 的 代码 在 逻辑 上 还 有 很 多 不 严 说 的 地 方 ， 但 可 以 让 大 家 清晰 地 看 清 异 步 任务 的 用 法 。 


16.3.4 异步 任务 的 退出 


异步 任务 的 后 台 方 法 在 一 个 新 线程 中 执行 ， 所 以 异步 任务 在 本 质 上 与 创建 新 线程 没有 区 
别 。 所 以 我 们 需要 在 异步 任务 所 在 的 Activity 销毁 时 让 和 它 尽 快 停止 。 参 考 前 面 讲 的 线程 的 退出 
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问题 ， 即 我 们 需要 让 异步 任务 的 doInBackground0 方 法 尽快 退出 。 这 需要 在 另外 的 线程 中 发 出 
停止 异步 任务 的 指令 ，AsyncTask 类 已 经 为 我 们 准备 好 了 ， 它 有 个 方法 cancel0， 可 以 在 任何 
时 刻 任 何 线程 中 调用 它 ， 但 是 调用 它 并 不 能 让 doImmBackground0 立 即 退 出 ， 调 用 它 带 来 的 效果 
是 发 出 取消 指令 , 之 后 再 调用 异步 任务 的 isCancelled0 方 法 时 ,会 返回 true (默认 返回 false) , 
我 们 需要 利用 它 ， 把 Cancel 状态 作为 doInBackgroundO 里 面 循环 的 检查 条 件 之 一 ， 所 以 
doInBackground()7; A 55 zJ] "ll  : 


// IKOCINTRER I NIRAG, TRETH RIR 
for (int i-0;i«cstrings.length;i--*)[í 
if (isCancelled()){ 
break; 
} 


try { 
} catch (IOException e) { 


} 


在 做 执行 循环 中 的 代码 之 前 检查 了 一 下 isCancelled0 是 否 被 调用 ， 如 果 被 调用 了 ， 就 直接 
跳出 循环 。 当 然 考 虑 到 循环 中 的 代码 有 的 操作 也 是 很 耗 时 间 的 ,为 了 能 反应 更 快 , 你 也 可 以 在 
其 代码 中 插入 Cancel 状态 的 检查 ， 代 码 如 下 : 

//l BKKKIBSNES, FREIHERR 


for (int i-0;i«strings.length;i--*)í( 
if(isCancelled())(í( 
break; 
} 
try { 
/ / HI ZEB URL EfTABÉIJ& URL HR 
URL urlObj = new URL(strings[il]l); 
HttpURLConnection connection - (HttpURLConnection) 
urlObj.openConnection(); 
// ETER XX —Á HP ETER FERT 
connection.connect (); 
if (isCancelled()){ 
break; 
} 
InputStream is = connection.getInputStream(); 
if (isCancelled()){ 
break; 
} 
//AÀ InputStream BEA 2 E JE GE 82 H fir Fs] 
Bitmap bitmap = BitmapFactory.decodeStream(is); 
is.close(); 
if(isCancelled())|í( 
break; 


) 
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/ / BESIDE PERI RA I F 

bitmaps[i]-bitmap; 

/ / ELE IEEE E ERE R HIERE, i M OP Muzy 1 
publishProgress (i-*1); 


} catch (IOException e) { 
e.printStackTrace(); 
return null; 


可 以 看 到 在 所 有 可 能 耗 时 的 操作 后 进行 了 检查 , 其 实 没 有 必要 做 到 这 种 程度 了 ， 只 要 在 循 
坏 开始 检查 一 次 就 行 了 ， 我 们 又 不 是 做 那 种 对 时 间 要 求 很 严格 的 实时 系统 。 那 么 这 个 cancel) 
方法 在 哪里 调用 呢 ? 当 然 是 Activity 的 onDestroy0 中 了 。 代 码 如 下 : 
QOverride 
protected void onDestroy() { 
/ / A UL BGHZJFZEIESEIEAI, Ek false Rr XE AN P BNE 
if(asyncTask!-null) { 


asyncTask.cancel(false); 


) 


super.onDestroy () ; // 44 ZW BH — FhÁC2SIBI— Zr E 


一 旦 对 某 个 异步 任务 调用 了 cancel0， 当 它 的 domBackground0 完 成 后 ， 就 不 再 调用 
onPostExecute() 了 ， 而 是 调用 onCancelled0， 根 据 我 们 现在 的 需求 ， 在 onCancelled0 中 什么 也 
AN Thi e f s 


QOverride 
protected void onCancelled() { 


super.onCancelled(); 


} 
当然 ， 既 然 什么 也 不 做 ， 也 可 以 不 实现 它 。 


使 用 OkHttp 进行 网 络 通 信 


OKHttp 是 使 用 率 非 常 高 的 第 三 方 ( 非 Android 官方 ) Java HTTP 通信 库 , 当然 也 非常 易 用 。 
使 用 它 ， 就 不 必 使 用 HttpURLConnection 等 这 些 Android 原生 API 了 。 当 接触 一 个 新 的 库 或 
框架 时 ， 最 好 先 去 它 的 官方 网 站 看 一 下 ， 一 般 都 能 帮助 你 快速 入 门 : 
http://square.github.10/okhttp/。 

下 面 我 们 用 它 来 把 前 和 面 下 载 图 像 的 例子 改 一 下 ， 用 OkHttp 下 载 图 像 。 

首先 在 Module 的 Gradle 脚本 中 添加 对 OkHttp 的 依赖 ， 如 图 16.4.1、 图 16.4.2 所 示 。 
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iii Android 


> B; app 
v (® Gradle Scripts 
(® build.gradle (Project: ThreadDemo) i 
O build.gradle (Module: app) w 
Hl gradle-wrapper.properties (Gradle Version) 
= proguard-rules.pro (ProGuard Rules for app) 
ii gradle.properties (Project Properties) 
(® settings.gradle (Project Settings) 
i local.properties (SDK Location) 


'* 1: Project 


32 7: Structure 


16.4.1 


dependencies | 
implementation fileTree(include: ['*.jar'], dir: 'libs'") 
implementation 'com.android.support:appcompat-v7:27.1.1" 
implementation 'com.android.support.constraint:constraint-layout:1.0.2' 
implementation 'com.android.support:design:27.1.1" 
| implementation 'com.squareup.okhttp3:okhttp:3.10.0' | 
testImplementation 'junit:junit:4.12' 
androidTestImplementation 'com.android.support.test:runner:1.0.1' 
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1' 


) 


图 16.4.2 


我 用 的 是 当前 最 新 版 ， 其 最 新 版 本 号 可 以 在 其 Github 托管 网 页 
https://github.com/square/okhttp 上 看 到 ， 如 图 16.4.3 所 示 。 


or Gradle: 


implementation 'com.squareup.okhttp3:okhttp:3.10.0' 


图 16.4.3 
添加 和 后 会 出 现 一 个 同步 提示 ， 点 它 执行 Grade 脚本 同步 工程 , 在 此 过 程 中 会 把 OKHttp3 
这 个 库 下 载 到 本 地 ， 并 自动 在 工程 中 引用 它 ， 于 是 我 们 就 可 以 在 工程 中 使 用 它 了 。 下面 我 们 用 
OKHttp 来 改写 下 载 多 张 图 片 的 功能 。 


16.4.1 使 用 OkHttp 下 载 图 像 
我 们 只 需要 改写 异步 任务 中 网 络 访问 的 代码 即 可 ， 废 话 不 多 讲 ， 直 接 上 代码 : 
/ LE fei FEUTPAÓT 


QOverride 
protected Bitmap[] doInBackground(String... strings) { 
Bitmap[] bitmaps - new Bitmap[strings.length]; 


//Él& okuttp EFRR 
OkHttpClient client - new OkHttpClient(); 


// IIIA BEC TRETIAK 
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for (int i=0;i<strings.length;i++){ 
if (isCancelled()){ 
break; 


} 


try{ 
//L FIEL LI DEZA RIER R 
Request .Builder builder = new Request.Builder(); 
// REA RHI URL Hh 
builder.url(strings[il); 
// UZER R 
Request request = builder.build(); 
/ / EP HIIRTE RII RENE WA R 
Call call = client.newCall (request); 
/ I ATTAINED IR, ZR TABBAR, MWA AR PHK MFE Response 'F 
// RE IE AKI 
Response response = call.execute(); 
/ / Iktll Http EFH (BÆ http body) 
ResponseBody body = response.body(); 
// BIS AÉ body "fug BIZ S, MURIH bytestream () ZEIT HÙ 
InputStream inputStream - body.byteStream(); 
//R ERMA HEA decodesStream()fÁ£fZ4] Bitmap. 


Bitmap bitmap = BitmapFactory.decodeStream(inputStream); 


MA ERA E ELT 
bitmaps [i]=bitmap; 
/ / UEIN ERTE EWART R HIER, i M OP, Mozy 1 
publishProgress (i+1); 
} catch (IOException e) { 
e.printStackTrace (); 
return null; 


} 


//X&[H] Bitmap ŽA 


return bitmaps; 


代码 的 详细 解释 请 看 注释 。 这 里 总 结 一 下 OkHttp 下 载 数 据 的 调用 流程 : 
@ 创建 请 求 构建 器 ; 

创建 请 求 对 象 ; 

创建 Client; 

利用 Client 创建 Call 对 象 ; 

利用 Call 发 出 调用 ， 返 回 结果 存在 ResponseBody 中 ; 

从 body 中 按照 数据 的 格式 取出 数据 。 

这 段 代 码 中 的 网 络 访 问 和 处 理 返 回 数据 的 部 分 可 以 写 得 更 简洁 一 些 : 
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Request.Builder builder = new Request.Builder(); 
Request request - builder.url(strings[i]).build(); 


Response response = client.newCall (request).execute(); 
InputStream inputStream = response.body().byteStream(); 
Bitmap bitmap - BitmapFactory.decodeStream(inputStream); 


注意 从 服务 端 获 取 数 据 都 是 用 HTTP GET 命令 ， 上 面 的 代码 中 并 没有 指定 是 哪 种 命令 ， 
是 因为 默认 就 是 GET， 当 然 你 也 可 以 在 Builder 中 通过 get0 方 法 明确 指定 ， 代 码 如 下 : 


Request request = builder.url(strings[i]).get().build(); 


16.4.2 创建 Web BR 2S sm 


后 面 的 内 容 ， 涉 及 到 数据 上 传 、 文 件 上 传 等 功能 ， 我 们 必须 有 目 己 的 Web 服务 程序 才能 
测试 ， 所 以 现在 要 创建 一 个 Web 服务 程序 。 

创建 Web 程序 需要 Java Web 开发 技术 ， 可 能 你 对 此 不 熟悉 ， 不 用 怕 ， 我 给 你 准备 了 一 个 
现成 的 ， 你 只 要 在 你 的 PC 上 把 它 运 行 起 来 ， 就 可 以 在 App 中 访问 这 个 服务 。 这 个 项 目 利 用 了 
Spring Boot 框架 ， 以 Maven 作为 项 目 管理 工具 〈 与 Gralde 类 似 的 东西 ) ， 所 以 利用 命令 行 可 
以 轻松 运行 起 来 ， 只 要 满足 一 个 条 件 : 能 上 网 。 

运行 这 个 程序 的 命令 很 简单 : mvn spring-bootrun . 

但 是 , 你 先 要 把 Maven 安装 到 你 的 PC 上 ,否则 找 不 到 mvn 这 个 工具 。 先 去 官网 下 载 Maven 
吧 ， 地 址 是 https://maven.apache.org/download.cgi1， 下 载 最 新 版 即 可 ， 如 图 16.4.2.1 所 示 。 


Files 


Maven is distributed in several formats for your convenience. Simply pick 
build Maven yourself. 


In order to guard against corrupted downloads/installations, it is highly re 
developers. 


Binary tar.gz archive apache-maven-3.5.3-bin.tar.gz 
Binary zip archive apache-maven-3.5.3-bin.zip 


Source tar.gz archive apache-maven-3.5.3-src.tar.gz 


Source zip archive apache-maven-3.5.3-src.zip 


图 16.4.2.1 


Hk 48 BOB 2x HR hb 7j: http://mirrors.hust.edu.cn/apache/maven/maven-3/3.5.3/binaries/ 
apache-maven-3.5.3-bin.zip， 我 下 载 的 是 3.5.3 版 ， 等 你 下 载 的 时 候 应 该 有 更 高 的 版 本 了 。 下 载 
后 解压 缩 ， 把 文件 夹 放 到 某 个 目录 下 ， 我 放 到 了 这 里 〈 如 图 16.4.2.2 所 示 ) : 
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此 电脑 > RA (C) > devtools > apache-maven-3.5.3 | 


bin 2018/6/9 16: 
boot 2018/6/9 16 


conf 2018/6/9 16 
lib 2018/6/9 16 
| LICENSE 2018/2/24 19:5 
| NOTICE 2018/2/24 19:5 
README.txt 2018/2/24 19:4 


16.4.2.2 


mvn 这 个 命令 在 文件 夹 bin 下 ， 所 以 为 了 能 在 任何 目录 下 都 能 访问 这 个 命令 ,我们 需要 把 
bin 文件 夹 加 入 系统 环境 变量 PATH 中 ， 如 图 16.4.2.3 所 示 。 


Administrator BJFHPSEZR(U) 


变星 fü 

JAVA HOME CAProgram FilesJavaxdk1.8.0 161 

OneDrive CAUsersyAdministratorjOneDrive 
CAUsersyAdministratoryAppDataM ocalProgramsVPythonyPytho... 
CAUsersvAdministratorvAppDataM ocali emp 


CAUsersVAdministratorVAppDatayLocalProgramsMVPythonyPython3... 
CAUsersVAdministratorNAppData Local ProgramsVPythonVPython3 
96USERPROFILE95VAppDataM ocaNMicrosoftWindowsAp ps 
C:\Program Files\Microsoft VS CodeNbin 
CAdevtoolsvapache-maven-3.5.3Abin — emm ——— 


16.4.2.3 


然后 打开 命令 行 窗口 ， 运 行 “mvn -v”， 如 果 看 到 类 似 图 16.4.2.4 所 示 信 息 ， 说 明 配 置 成 


16.4.2.4 


再 下 载 服 务 端 源码 : https://github.com/niugao/QQAppServer/archive/master.zip, 解压 到 某 个 
文件 夹 下 ， 如 图 16.4.2.5 所 示 。 


脑 > work (F:) > workspace > QQAppServer-master 
名 称 修改 日 期 


| idea 2018/6/9 2:09 


^ src 2018/6/9 2:09 


pom.xml 2018/6/9 17:13 
| QQAPPServer.iml 2018/6/9 17:13 
| README.md 2018/6/9 17:13 


16.4.2.5 
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在 命令 行 窗 口中 ， 进 入 QQAppServer-master 文件 夹 ， 再 执行 命令 mvn spring-bootrun， 如 
图 16.4.2.6 所 示 。 


16.4.2.6 
第 一 次 运行 还 是 很 耗 时 间 的 , 主要 是 需要 从 Maven 仓库 中 下 载 很 多 依赖 库 Jar 文件 ,所 以 
需要 耐心 等 待 , 只 要 命令 行 窗 口中 没有 出 现 红 色 的 语句 , 就 说 明 没 错误 , 当 看 到 下 面 的 语句 时 ， 
说 明 Web 服务 启动 成 功 ， 如 图 16.4.2.7 所 示 。 


BIIOI 


16.4.2.7 


打开 浏览 器 ， 在 地 址 栏 中 输入 地 址 : http://localhost:8080， 可 以 看 到 如 图 16.4.2.8 所 示 网 


» localhost 


& Seaborn, Ansible, | m AndroidDevTools 


File to upload: | 选择 文件 未 选择 任何 文件 
Upload 


16.4.2.8 


到 此 为 止 ，Web 服务 程序 配置 成 功 。 


16.4.3 ”使 用 OkHttp 下 载 数据 


通过 HTTP 协议 ， 可 以 下 载 各 种 数据 ， 比 如 可 以 下 载 一 个 产品 的 信息 ， 下 载 一 张 图 像 ， 下 
载 一 个 文件 ， 下 载 一 个 网 页 。 实 际 上 从 HTTP 的 打包 方式 来 讲 ， 这 些 数据 基本 可 分 成 两 大 类 ， 
一 是 文本 ， 二 是 二 进 制 数据 。 网 页 属于 文本 ， 图 像 、 文 件 属于 二 进 制 数据 ， 至 于 产品 信息 这 样 
的 数据 ,一 般 也 用 文本 表示 ， 它 其 实 对 应 着 内 存 中 的 对 象 ， 所 以 利用 那些 可 以 方便 地 表示 对 象 
的 文本 格式 ， 比 如 JSON, XML 等 。 不 论 服务 端 收 到 客户 端的 数据 ， 还 是 客户 端 收 到 服务 端 
的 数据 ， 都 需要 知道 数据 的 具体 格式 ， 于 是 HTTP 包头 中 就 带 有 MIME 信息 ， 比 如 text/html 
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表示 HTTP 包 的 body 中 带 的 是 HTML 文本 ,text/json 表示 带 的 是 JSON 文本 (其 实 对 应 对 象 )， 
image/png 表示 市 的 是 PNG 格式 的 图 像 。 可 以 看 到 MIME 中 “/” 之 前 是 大 类 别 ， 后 面 是 小 类 
别 。 

浏览 器 从 服务 端 下 载 的 文本 数据 一 般 是 HTML, 而 App 下 载 的 文本 大 多 是 JSON。 比 如 一 
个 电子 商务 服务 器 ， 它 既 能 为 浏览 器 提供 商品 展示 数据 ， 也 能 为 App 提供 商品 展示 数据 ， 但 
是 它 为 浏览 器 提供 的 是 HIML， 这 个 HIML 中 不 单 包含 了 多 个 商品 信息 ， 还 包含 了 如 何 展示 
和 摆 放 这 些 信息 的 代码 ， 这 些 都 是 在 服务 端 已 经 决定 的 ， 浏 览 器 只 需 忠实 地 按照 HTML 代码 
把 网 页 创建 并 展示 出 来 即 可 ; 而 为 App 提供 的 是 JSON，JSON 中 仅 包含 了 各 商品 的 信息 ， 至 
于 商品 如 何 展 示 ， 由 App 自己 决定 。 为 App 提供 的 数据 是 更 灵活 的 ,网络 传输 的 数据 量 更 少 。 
其 实现 在 网 页 版 数据 也 在 改 为 App 这 种 方式 , 即 癌 浏览 器 发 送 的 是 JSON, 浏览 器 用 JavaScript 
将 JSON 数据 中 的 商品 取出 来 ， 然 后 决定 它们 的 展示 方式 。 

在 App 中 获取 数据 其 实 就 是 用 程序 获取 ， 服 务 端 为 此 而 提供 的 那些 服务 属于 应 用 程序 接 
O CAPI) 。 下 面 我 们 就 写 一 点 从 服务 端 取 得 JSON 数据 的 代码 。 这 块 JSON 数据 是 从 这 个 地 
址 取得 的 : http://localhost:8080/apis/get message ， 当 然 前 提 是 你 已 把 我 们 的 Web 项 目 启 动 起 
来 了 ， 在 浏览 融 中 可 以 先 看 一 下 (如 图 16.4.3.1 所 示 )〉。 


B8 | $ localhost 


"contactNane" : RA FH ^, "timo": "2018-06-19T12:56:48. 678-0000", "contont^: RHET $&? Got out! "] 


164.3.1 


A V RRRA Ae HTML 格式 , 于 是 把 文本 直接 显示 了 出 来 。 Android 中 的 代码 
如 下 : 


private void getJson()í 
Thread thread = new Thread (new Runnable() { 
QOverride 
public void run() { 
OkHttpClient client - new OkHttpClient(); 
Request.Builder builder - new Request.Builder(); 
Request request - 
builder.url("http://10.0.2.2:8080/apis/get message") .build(); 
try { 
Response response = client.newCall(request).execute(); 
String json - response.body().string(); 
Log.i("getjson",json); 
) catch (IOException e) { 


e.printStackTrace(); 
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此 方法 中 创建 了 一 个 线程 ， 线 程 中 使 用 OKHttp 访问 了 PC 上 的 Web 服务 器 ， 注 意 URL 
中 的 主机 地 址 是 10.0.2.2， 而 不 是 localhost， 因 为 代码 是 在 Android 虚拟 机 中 执行 的 ，localhost 
本 喘 ， 于 是 在 Android 设备 中 就 代表 了 虚拟 机 自己， 而 我 们 的 Web 程序 并 不 是 在 虚拟 机 中 运 
行 的 ， 所 以 要 访问 PC 机 的 地 址 ， 相 对 于 虚拟 机 来 说 ， 宿 主机 的 地 址 就 是 10.0.2.2。 如 果 你 是 
在 真 机 上 调试 ， 那么 就 需要 真 机 与 PC 都 连 入 同一 局 域 网 ， 然 后 找 出 PC 的 地 址 ， 如 图 16.4.3.2 
所 示 。 


16.4.3.2 


请 目 行 调用 这 个 方法 ， 方 法 的 运行 结 末 是 在 Logcat 中 输出 日 志 : 


但 是 ，JSON 一 般 是 用 来 表示 对 象 的 ， 它 里 面 的 数据 是 “key:value” 对 ， 从 这 堆 JSON 数 
据 中 可 以 看 出 它 表 示 的 是 一 个 “消息 ”，, 包含 了 消息 的 contactName (联系 人 名 字 ) ，time (发 
出 时 间 ) ，content (消息 内 容 ) ， 我 们 应 该 把 这 个 JSON 转换 为 消息 对 象 ， 怎 么 做 呢 ? 请 看 下 
ag. 


16.4.8 JSON 转 对 象 


JSON 转 对 象 其 实 是 根据 JSON 中 的 数据 创建 出 类 的 实例 。 要 创建 实例 ,当然 先 要 有 类 了 ， 
我 们 根据 收 到 的 JSON 数据 可 以 定义 这 样 的 类 与 它 对 应 : 


public class ChatMessage { 
private String contactName; 


private long time;///e/// BM 
private String content; //;/ 5/2 


public ChatMessage(String contactName, long time, String content) { 
this.contactName - contactName; 
this.time = time; 
this.content - content; 
} 
public String getContactName() { 
return contactName; 
} 
public void setContactName (String contactName) { 
this.contactName - contactName; 


) 
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public long getTime() { 
return time; 

} 

public void setTime (long time) { 
this.time = time; 


} 


public String getContent() { 
return content; 

} 

public void setContent(String content) { 
this.content - content; 


) 


我 们 当然 可 以 在 收 到 JSON 后 , 先 创 建 Message 类 的 对 象 , 然后 根据 JSON 中 的 Key 为 对 
象 对 应 的 属性 赋值 (这 叫 反 序列 化 ， 那 么 由 对 象 转 成 JSON 就 叫 序列 化 了 〉 ， 但 是 这 个 过 程 是 
比较 麻烦 的 ， 因 为 你 得 分 析 JSON 字符 串 ， 还 有 创建 对 象 等 工作 ， 如 果 有 现成 的 API 为 我 们 
做 了 多 好 ? 当然 实现 这 样 的 API 并 不 是 难事 ， 所 以 有 很 多 专门 做 这 种 事 的 第 三 方 库 ， 比 如 
fastjson, Jackson. Gson 等 。Gson 是 Google 自己 家 的 ， 所 以 我 们 选择 Gson 来 做 吧 。 
首先 添加 gson 的 依赖 : implementation 'com.google.code.gson:gson:2.8.5' . 
Gson 的 基本 用 法 还 是 很 简单 的 ， 我 直接 上 代码 吧 ， 在 上 节 的 方法 中 ， 将 获取 JSON HS 
分 改 为 这 样 : 
Response response = client.newCall (request).execute(); 
/ / 3T TARTAEERR Rug IPIE EAR, MUAH string() 万 让 以 
String json - response.body().string(); 
/ / FII gson 44 JSON RA JL A R 
Gson gson-new Gson(); 
ChatMessage message = gson.fromJson(json,ChatMessage.class); 


Log.i("gson","name:"-cmessage.getContactName () *",content:"-c-message.getContent 


0); 


运行 App, 触发 ISON 获取 操作 , 可 以 在 LogCat 窗口 中 看 到 这 样 的 日 志 ( 别 忘 了 用 “gson” 
过 滤 ) ， 如 图 16.4.4.1 所 示 。 


1644.1 


说 明 反 序列 化 成 功 ! 


16.4.5 ”使 用 OkHttp 上 传 文件 
我 们 在 网 页 中 经 常 看 到 上 传 文件 的 功能 ， 比 如 图 16.4.5.1 所 示例 子 。 
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Product - Create 


标题 lumia 1520 


2013 年 10 月 22 日 ， 诺 基 王 Lumia 1520]E x& 
发 布 , 该 产品 支持 PureView 技 术 和 人 脸 识 
别 功能 ， 可 以 同时 拍摄 一 张 2000 万 像素 照 
片 和 保存 一 张 500 万 像素 照片 用 于 分 享 。 


价格 2999 | 


164.5.1 


这 个 页 面 中 要 上 传 很 多 信息 ， 图 片 这 一 栏 就 是 指定 一 个 文件 ， 当 用 户 点 击 “Create” 按 钮 
时 ， 所 有 信息 被 打包 上 传 到 服务 器 。 这 种 功能 是 通过 一 种 叫 作 Multipart 表单 的 方式 打包 数据 
并 上 传 的 ， 这 种 数据 对 应 的 MIME 为 “multipartform-data”。 我 们 写 代 码 上 传 文件 时 ， 也 是 
构建 出 这 种 数据 。 下 面 就 实现 一 下 这 个 功能 , 但 是 在 实现 之 前 ， 应 先 找 个 文件 ,我 们 项 目 中 的 
资源 文件 ， 在 打包 成 APK 安装 包 时 都 会 被 包含 在 里 面 ， 安 装 时 就 会 放 到 Android 设备 中 ， 但 
是 一 般 的 资源 文件 不 容易 直接 读 出 它们 数据 ， 而 有 一 种 特殊 的 资源 文件 就 可 以 ， 那 就 是 Raw 
类 型 的 资源 ，Raw 是 原始 的 意思 ， 这 种 资源 不 会 被 处 理 ， 会 原封 不 动 地 放 到 设备 中 。 所 以 我 
们 要 添加 一 个 Raw 型 资源 ， 而 要 添加 这 种 资源 ， 应 先 添 加 Raw 文件 夹 ， 如 图 16.4.5.2 所 示 。 


€ New Resource Directory E 

Directory name: raw 

Resource type: „raw v 
Source set: main v 
Available qualifiers: Chosen qualifiers: 


$J Country Code 


(» Network Code 

© Locale 

= Layout Direction 

2» Smallest Screen Width 
= Screen Width 


o Cance 


>> 
Nothing to show 


16.4.5.2 


然后 找 一 个 图 像 文 件 ， 放 到 raw 文件 夹 下 ， 如 图 16.4.5.3 所 示 。 
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v weapp 
> MN manifests 
> M java 
v res 
* drawable 


layout 


> 
> 
> mipmap 
v D raw 
=| tetris.jpg 

> 0 values iian 
v (9 Gradle Scripts 

(® build.gradle (Project: ThreadDemo) 


16.4.5.3 


代码 如 下 : 


private void uploadOneFile() { 
//Üls&Er£e£eFg, Ag 
Thread thread-new Thread(new Runnable() { 
QOverride 
public void run() { 
String msg-null; 
try { 

/ / RHH 
String url = "http://10.0.2.2:8080"v; 
//&l£ fg£& multipart form HJfA&EZEN/ S 
MultipartBody.Builder builder - new MultipartBody.Builder(); 
//U EE 2S7H "multipart/form-data" 
builder.setType (MultipartBody. FORM); 
// ELEME, BRTEILC X TEZ IEEE, 

// 每 次 添加 的 数据 都 是 一 个 Part， 多 个 part 组 成 HTTP 的 body 
// 第 一 个 参数 是 这 个 Part 的 名 字 ， 有 了 它 服 务 端 才能 区 分 不 同 的 part 
builder.addFormDataPart("userName", "xxxxx"); 
/ | K Raw 资源 获取 输入 流 对 象 ， 以 从 读 出 资源 文件 中 的 数据 
InputStream is- getResources () .openRawResource (R.raw.tetris); 
// 开 足够 大 的 缓存 
byte[] imgData = new byte[is.available()]; 
// 读 文件 数据 到 缓存 中 
is.read(imgData); 
/ /创建 一 个 Part， 这 里 面 放 的 是 资源 文件 的 内 容 
RequestBody rb = RequestBody.create(null, imgData); 
/ /添加 这 个 Part， 第 一 个 参数 是 这 个 Part 的 名 字 ， 第 二 个 参数 是 这 个 文件 的 名 字 ， 
// 第 三 个 参数 是 这 个 Part 的 数据 
builder.addFormDataPart("file", "tetris.jpg", rb); 
/ /创建 包含 所 有 Part 的 RequestBody 
RequestBody body = builder.build(); 
/ /创建 client 以 发 出 请 求 
OkHttpClient client = new OkHttpClient(); 
//8]& Request, L POST 方式 发 出 请 求 
Request request - new 

Request.Builder().url(url).post (body).build(); 
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/ / BH] web 后 台 发 起 请 求 
client.newCall(request).execute(); 
} catch (Exception e) { 


msg = e.getLocalizedMessage(); 
} 
} 
)); 
/ /启动 线程 ， 注 意 ， 它 是 在 主线 程 中 执行 ! ! 
thread.start(); 


运行 App， 触 发 这 个 方法 执行 ， 上 传 成 功 后 可 以 通过 浏览 器 在 主页 Chttp://localhost:8080) 
中 看 到 已 上 传 的 文件 ， 如 图 16.4.5.4 所 示 。 


《 C BB |& localhost 


LL - 


e Seaborn, Ansible, L T AndroidDevIools 团 


File to upload: | 选择 文件 | 未 选择 任何 文件 


Upload 
e http-//localhost:8080/files/tetris.jpg 


164.54 


使 用 Retrofit 进行 网 络 通 信 


Retorfig 是 什么 呢 ? 是 另 一 个 Java HTTP 通信 和 库 。 前 面 不 是 讲 了 OkHttp 了 吗 ? 我 感觉 挺 好 
用 的 ， 为 什么 又 讲 一 个 库 呢 ? 这 是 因为 Retrofit 比 OkHttp 使 用 起 来 还 简单 一 点 ， 而 且 它 支持 
当前 正 流 行 的 以 注解 的 方式 来 使 用 。 注 意 Retrofit 是 基于 OkHttp 创建 的 ， 对 OkHttp 进行 了 进 
一 步 的 封装 ， 当 然 用 起 来 更 简单 了 。 

下 面 我 们 就 用 Retrofit 实现 一 下 前 面 用 OkHttp 实现 的 功能 。 


16.5.1 加 入 Retrofit 的 依赖 项 


如 何 添加 依赖 项 呢 ? 首先 去 它 的 官网 看 看 有 没有 帮助 : http://square.github.io/retrofit/ ， 看 
到 了 这 样 的 内 容 (如 图 16.5.1.1 所 示 ) 。 


Download 


| Latest JAR 


The source code to the Retrofit, its samples, and this website is available on GitHub. 


16.5.1.1 
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点 这 个 链接 进入 https:;//github.com/square/retrofit ， 发 现 如 下 内 容 (如 图 16.5.1.2 所 示 ) 。 


Download 


Download the latest JAR or grab via Maven: 


<dependency> 
«groupId»com.squareup.retrofit2«/groupId» 
«artifactId»retrofit«/artifactid» 
«version»2.4.0«/version» 

«/dependency» 


or Gradle: V4 


implementation 'com.squareup.retrofit2:retrofit:2.4.0"' 


16.5.1.2 


在 模块 build.gradle 文件 中 加 入 “implementation 'com.squareup.retrofit2:retrofit:2.4.0'" , 1 
然 由 于 它 要 依赖 OkHttp， 所 以 也 要 加 入 OkHttp 的 依赖 项 。 


16.5.2 F8 Retrofit 下 载 文本 


我 们 把 前 面 OkHttp 下 载 JSON 文本 并 转换 成 对 象 的 功能 用 Retrofit 玩 一 下 。 首 先 我 们 要 创 
建 一 个 接口 ， 接 口中 定义 方法 ， 这 些 方法 分 别 负责 访问 服务 端 某 个 地 址 ， 从 这 个 地 址 下 载 数据 
并 返回 给 调用 者 。 比 如 使 用 OkHttp 下 载 JSON 时 ， 先 建立 网 络 连接 ， 再 发 出 请 求 ， 再 将 请 求 
到 的 JSON 文本 转 成 对 象 ， 这 个 过 程 现在 就 对 应 我 们 定义 接口 中 的 一 个 方法 ， 但 与 OKHttp 不 
同 ， 我 们 此 时 只 需要 定义 接口 ， 而 不 需要 实现 它 ， 因 为 它 的 实现 由 Retrofit 来 完成 〈 于 是 我 们 
少 写 很 多 代码 ) ， 但 我 们 还 要 告诉 Retrofit 这 个 接口 要 访问 服务 端的 哪个 地 址 ， 是 用 GET 还 
是 POST， 甚 至 更 多 网 络 参数 ， 这 部 分 用 注解 来 做 。 有 具体 看 下 面 这 个 接口 : 


public interface ChatService { 
CGET ("/apis/get message") 


Call«ChatMessage» getChatMsg(); 


你 要 注意 的 是 这 个 接口 中 方法 的 返回 值 类 型 ， 必 须 为 Call， 但 它 是 一 个 范 型 ， 需 要 为 它 传 
入 一 个 类 型 参数 ， 这 个 参数 表明 了 HTTP 包 的 body 中 是 什么 数据 ， 比 如 接口 中 的 这 个 方法 ， 
从 名 字 就 看 出 它 是 要 获取 一 条 聊天 信息 , 所 以 服务 端 返回 的 数据 就 是 聊天 信息 , 我 们 可 以 通过 
特定 的 方法 很 方便 地 将 此 数据 取出 。 再 一 点 就 是 注解 的 内 容 ，GET 表示 使 用 HTTP GET 命令 
获取 数据 ，“/apis/get message” 表 示 服 务 端 的 啊 应 请 求 的 路 径 ， 它 最 终 与 服务 端的 地 址 〈 就 
是 下 面 代码 中 的 "http://10.0.2.2:8080/") 组 成 URL 地 址 : "http://10.0.2.2:8080/apis/get message". 

现在 就 可 以 使 用 这 个 接口 获取 数据 ! 当然 得 通过 Retorfit 使 用 这 个 接口 才 行 ， 代 码 如 下 : 

//8l/& Retrofit HR, ARZ m 3L AL 


Retrofit retrofit = new Retrofit .Builder () 


.baseUrl ("http://10.0.2.2:8080/") 
.build(); 
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//Retrofit ÍfRÍBTELISUUIZS JEÉI£E SUP, ZEHA T AISSTURHRCR, 

ChatService service - retrofit.create(ChatService.class); 

// WHEEL GA WIT EHIE AE DENER PEH S 

/ IERM EAH RAAN BT REET -PATAREI R call 

retrofit2.call<ChatMessage> call = service.getChatMsg(); 

try { 
// HA call KEMBAR, ÆRA HHAH. ERPE — S Response HR 
//R BWE BH- Call 的 参数 一 至 
retrofit2.Response«ChatMessage» response = call.execute(); 
ChatMessage message = response.body(); 


Log. i("retrofitDemo", "name:"+message.getContactName ()+",content:"+message.ge 
tContent ()); 
} catch (IOException e) { 

e.printStackTrace(); 


} 


这 段 代 码 涉及 网 络 通信 ， 上 所 以 要 开 线程 执行 。 注 意 通过 response.body()3XHX 了 HTTP body 
中 的 数据 ， 此 方法 返回 的 数据 是 ChatMessage 对 象 ， 也 就 是 说 Retrofit 直接 把 JSON 文本 转 成 
对 象 了 。 运 行 这 段 代 人 码 ( 注 意 Web 程序 必须 先 运行 起 来 ) ， 会 出 现 什么 呢 ? 其 实 不 会 得 到 聊 
ABER. (gemi! AA ERARE? 因为 我 们 少 做 了 一 步 : 指定 数据 转换 工厂 。 默 认 
情况 下 ，Retrofit 并 不 会 把 数据 转换 成 实际 所 表示 的 对 象 ， 需 要 我 们 指定 如 何 去 转 换 ， 如 何 指 
定 呢 ?” 只 需 在 构建 Retrofit 对 象 时 ， 添 加 一 个 转换 工厂 对 象 即 可 : 
Retrofit retrofit = new Retrofit.Builder() 

.baseUrl ("http://10.0.2.2:8080/") 


.addConverterFactory (GsonConverterFactory.create()) 
.build(); 


可 以 看 到 添加 了 一 个 GsonConverterFactory 对 象 ， 它 是 利用 Gson 库 将 JSON 转换 成 对 象 
的 ， 要 使 用 这 个 类 ， 必 须 添 加 依赖 项 : 


implementation 'com.squareup.retrofit2:converter-gson:2.4.0' 


现在 再 运行 试 试 吧 ， 是 不 是 得 到 消息 了 ? 对 比 一 下 OkHttp 代码 ， 是 不 是 省 事 不 少 呢 ? 


16.5.3 用 Retrofit 下 载 图 像 


下 面 再 玩 一 下 下 载 图 像 吧 。 
首先 在 接口 ChatService 中 添加 新 的 方法 : 


GGET ("/image/a.Jjpg") 
Call«ResponseBody» getImage(); 
可 以 看 到 获取 图 像 的 路 径 是 “image/ajpg”， 服 务 端 给 我 们 返回 的 是 这 个 图 像 的 数据 ， 由 


于 不 是 文本 ， 所 以 以 二 进 制 字 节 数 组 形式 返回 。 还 要 注意 此 方法 的 返回 类 型 Call 的 范 型 参数 
是 ResponseBody， 如 果 不 使 用 转换 工程 自动 转换 HTTP body 中 的 数据 ， 那 么 HTTP body 就 需 
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要 用 ResponseBody 来 代表 。 下 一 步 需 要 在 MainActivity 中 添加 方法 以 下 载 图 像 : 


private void getOneImage () { 
Thread thread = new Thread (new Runnable() { 
QOverride 
public void run() { 
//Él& Retrofit HR, ARA A E PLA AL 
Retrofit retrofit - new Retrofit.Builder() 
.baseUrl ("http://10.0.2.2:8080/") 
Düurldi; 
//Retrofit fRÍEZELISUIIZS JEEI£E SUfhl,. ZRA Y AISTCRHBUR, 
ChatService service - retrofit.create(ChatService.class); 
retrofit2.Call«ResponseBody» call = service.getImage(); 
try { 
retrofit2.Response«ResponseBody» response = call.execute(); 
//response.body () iX PIHÆ ResponseBody HR, M E BEIEXeAC— E 5$ A Wt 
S/Z NEPRA REED HTTP body HAZ, WERB EI ULT 


final Bitmap bmp = 
BitmapFactory.decodeStream(response.body().byteStream()); 


// EERIE P RARAHI Imageview 
Handler handler = new Handler (getMainLooper () ) ; 
handler .post (new Runnable() { 
QOverride 
public void run() { 
imageViews[0].setImageBitmap (bmp); 
} 
)); 


) catch (IOException e) { 
e.printStackTrace(); 


thread.start(); 


请 自行 调用 此 方法 。 注 意 与 获取 聊天 消息 不 同 之 处 是 ， 并 没有 为 Retrofit 对 象 设 置 转换 工 
T, AX Retrofit 并 没有 提供 将 二 进 制 数 据 转 成 Bitmap 的 类 ， 所 以 就 不 添加 了 ， 我 们 自行 完 
成 了 转换 过 程 。 
16.5.4 用 Retrofit 上 传 图 像 

首先 是 在 接口 中 添加 一 个 文件 上 传 的 方法 : 


@Multipart 


QPOST ("/"v) 
Call«ResponseBody» uploadImage (8Part MultipartBody.Part filedata); 
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“@Mnultipart” 表 明 以 multipart-form 的 形式 打包 数据 ; “@POST("")” 表 示 以 POST 方 
式 发 出 请 求 ， 这 是 必须 的 ，GET 方式 无 法 上 传 大 量 数据 ， 其 参数 表示 请 求 路 径 ，“/” 表 示 根 
路 径 。 为 什么 是 根 路 径 呢 ? 因为 服务 端 程序 就 是 在 根 路 径 接 收文 件 。 此 方法 的 参数 是 一 个 
MultipartBody.Part 对 象 ， 也 就 是 说 使 用 此 方法 时 要 先 创建 一 个 MultipartBody.Part 对 象 。 示 例 
代码 如 下 : 


private void uploadOneFile() { 
// Él& E ARTE, WE 
Thread thread-new Thread (new Runnable() í( 
QOverride 
public void run() { 
String msg-null; 


Retrofit retrofit - new Retrofit.Builder() 
.baseUrl ("http://10.0.2.2:8080/") 
JBuridgis 


ChatService service - retrofit.create(ChatService.class); 
InputStream inputStream-null; 
try { 
// MK Raw Æ R WmMX fff 
inputStream = getResources ().openRawResource (R.raw. tetris); 
/ / ZEE BE HZA, JEXCIEINSS NEERA PA IF 
byte[] data-new byte[inputStream.available()]; 
inputStream.read (data); 
/ TIE LX TEE EIE — f RequestBody, 
// & MIME 是 application/otcet-stream， 表 示 二 进 制 数据 流 
RequestBody requestFile = RequestBody.create( 
MediaType.parse("application/otcet-stream"), data); 
// FI RequestBody Él/£&—f Part 
MultipartBody.Part part - MultipartBody.Part.createFormData( 
"file", "trtes.jpg", requestFile); 
// W/Hl Service PHAS, LEff/MultiPart XX7& 
retrofit2.Call«ResponseBody» call = 
service.uploadImage (part); 
/ / AT TIPPHTR El 
retrofit2.Response«ResponseBody» response - call.execute(); 
/ / EPER [n] 
ResponseBody body = response.body(); 
Log.i("response",body.string()); 
} catch (IOException e) { 
e.printStackTrace (); 


//FHAIZGFE, PERO UE ÍEPUBÓAD :! 
thread.start(); 


395 


Android 9 编程 通俗 演义 


注意 对 方法 MultipartBody.Part.createFormData0 的 调用 ， 这 些 方法 的 作用 是 创建 MultiPart 
中 的 一 个 Part， 我 们 传 入 了 三 个 数 ， 第 一 个 是 Key， 表 单 中 的 数据 是 Key-Value 的 形式 ， 那 
Value 在 哪里 呢 ? 第 三 个 参数 就 是 Value， 当 然 它 是 一 个 Part 对 象 。 第 二 个 参数 只 有 在 创建 二 
进 制 数据 Part 时 才 用 到 ， 创 建文 本 Part 时 融 用 不 到 ， 它 的 作用 是 指明 上 传 的 文件 的 名 字 ， 一 
般 情况 下 服务 端 收 到 上 传 的 文件 后 都 会 改名 ,所 以 这 个 文件 名 参数 更 大 的 作用 是 其 扩展 名 指出 
了 文件 的 格式 ， 比 如 这 里 是 “JPG”， 服 务 端 收 到 后 可 以 根据 这 个 扩展 名 正确 地 解码 出 图 像 ， 
或 使 改名 后 的 文件 依然 有 正确 的 扩展 名 。 

请 自行 调用 此 方法 ， 当 它 成 功 执行 后 ， 在 Web 程序 根 路 径 下 的 upload-dir 中 会 出 现 一 个 
图 像 文件 ， 如 图 16.5.4.1 所 示 。 


此 电脑 > work (F:) > workspace > QQAppServer-master > upload-dir 


16.5.4.1 
同时 在 浏览 器 中 查看 Web 程序 的 主页 ， 可 以 看 到 上 传 的 图 像 文件 ， 如 图 16.5.4.2 所 示 。 


《 EH |€& localhost 


€ Seaborn, Ansible || 国 AndroidDevTogk - 


File to upload: 未 选择 任何 文件 


® http://localhost.8080/files/aaa.jpg 


16.5.4.2 


到 此 为 止 基本 的 网 络 通信 技术 ， 我 们 就 讲 守 了。 后面 章节 将 为 我 们 的 QQApp 增加 网 络 聊 
天 功能 。 
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写 了 很 多 与 多 线程 有 关 的 代码 ， 不 知 你 是 否 对 多 线程 的 使 用 感到 烦琐 ?尤其 是 在 多 线程 切 
换 时 。 如 果 有 一 套 API， 可 以 让 我 们 在 写 多 线程 代码 时 做 到 : 

COD 不 用 创建 线程 对 象 ， 直 接 指定 一 个 方法 在 哪个 线程 运行 

(2) 目 动 将 一 个 线程 的 结果 扔 到 另 一 个 线程 中 《〈 束 像 AysncTask 那样 ) ; 

(3) 让 我 们 只 关注 业务 实现 而 感觉 不 到 线程 的 存在 。 


那 该 多 么 美好 ! 不 管 你 相 不 相信 ， 美 好 的 事情 真 会 发 生 ! IB BITE STE C. SCC 
挪移 第 九 层 的 异步 调用 框架 库 : RxJava! 请 大 家 小 心 ， 别 被 它 挪 到 ! 如 果 发 现 目 己 忽然 出 现在 
jy. ebur. 

RxJava 经 历 了 两 代 了 ， 当 前 有 1.x 和 2.x 两 个 版 本 ， 我 们 当然 讲 最 新 的 ， 对 ， 融 是 2.X 版 。 
要 想 使 用 它 ， 当 然 还 是 需要 先 加 入 依赖 项 : 


小 试 牛刀 


好 了 ，RxJava 大 神 被 请 到 了 ， 下 面 我 们 先 请 RxJava 给 大 家 亮点 小 招式 ， 什 么 招式 呢 ? 先 
来 改写 一 下 15.4.3 节 中 下 载 图 像 的 代码 吧 。 改 写 完 了 (真是 快 如 闪电 啊 ! ) ， 代 码 如 下 : 


Observable.create(new ObservableOnSubscribe«Bitmap»^»() { 
QOverride 
pU UD ME emitter) throws Exception { 
/"/fl&£ Retrofit HR, HARR US E PLA AL 
Retrofit retrofit - new Retrofit.Builder () 
.baseUrl("http://www.tucoo.com/") 
.build(); 
//Retrofit fRÍETZLISEHUZS JE OÆ EH T ABBICGEHIICK. 
ChatService service = pt poeni occasus 
retrofit2.Call«ResponseBody» call - 
service.getlImage ("water 05102s.jpg"); 


PAGINA L cq (d response = call.execute(); 
//response. body () RPIHZÆ ResponseBody HR, ME BTEXEK— f E WI, 
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/ AUREAS EARUM HTTP body MAR, BbXS FIRE RIE 
Bitmap bmp - BitmapFactory.decodeStream(response.body().byteStream()); 


emitter.onNext (bmp); 
emitter.onComplete (); 
} 
)) 
.subscribeOn (Schedulers.computation()) 
. subscribe (new Observer«Bitmap»() { 
QOverride 
public void onSubscribe (Disposable d) { 


) 


QGOverride 

public void onNext (Bitmap bitmap) { 
//imageViews[0].setimageBitmap (bitmap); 
Log.w("rxjava","onNext()"); 


) 


QOverride 
public void onError (Throwable e) { 
Log.e("rxjava",e.getLocalizedMessage()); 


) 


QOverride 
public void onComplete() { 


) 


好 像 RxJava 看 起 来 脸 有 点 红 ， 它 的 招式 比 起 原来 还 要 烦琐 ， 表 演 失 败 了 吗 ? 还 不 敢 下 结 
论 ， 我 们 还 是 先 仔细 看 一 下 它 做 了 什么 。 

首先 它 调 用 Observable.create0) 方 法 创建 了 一 个 Observable 对 象 ， 创 建 时 传 入 了 一 个 叫 作 
ObservableOnSubscribe 的 对 象 ， 这 家 伙 主 要 是 包 关 一 个 方法 : subscribe) (订阅 ，， 可 以 看 到 
在 这 个 方法 中 通过 Retrofit 下 载 了 一 个 图 像 ， 这 个 图 像 需 要 传 到 主线 程 中 ， 但 这 里 只 是 用 图 像 
作为 参数 调用 了 emitter.onNext0 方 法 ， 其 实 你 也 能 猜 出 来 ， 正 是 这 个 方法 ， 将 数据 扔 到 了 另外 
的 线程 中 (当然 也 可 以 扔 到 当前 线程 中 了 ) o emitter 是 subscribe0 方 法 的 参数 ， 是 别人 传 进 来 ， 
我 们 不 用 管 是 谁 传 的 ， 我 们 只 需要 知道 它 是 用 于 扔 出 数据 的 就 行 。 它 还 调用 了 onComplete(; 
这 个 并 没有 扔 出 什么 数据 ， 而 是 扔 出 了 一 个 事件 ， 表 示 所 有 的 数据 都 扔 完了 。 

再 往 下 看 ， 创 建 完 Observable 对 象 之 后 ， 调 用 了 它 的 方法 subscribeOn0， 此 方法 用 于 指定 
订阅 活动 〈 也 融 是 ObservableOnSubscribe 的 方法 ) 在 哪个 线程 中 进行 ， 如 果 没 有 这 一 步 ， 就 
在 当前 线程 中 进行 (因为 要 访问 网 络 ， 必 须 指定 在 后 台 线 程 中 搞定 订阅 活动 )。 它 的 参数 是 一 
个 Schedulers 对 象 ， 其 实 也 不 必 深 究 它 是 个 什么 东西 ， 可 以 认为 它 就 是 代表 线程 ， 
Schedulers.computation() 表示 后 台 线 程 。 最 后 调用 了 subscribe) 方法 (注意 与 
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ObservableOnSubscribe 中 的 subcribeO0 区 分 ) ， 为 此 方法 传 入 了 一 个 Observer OULEZ 74) 对 象 ， 
这 个 对 象 的 主要 作用 是 包 着 4 个 方法 :onSubscribe0 .onNext() .onError() 、.onCompleteO . Observer 
用 于 接收 emitter. 的 方法 扔 出 的 数据 和 其 他 事件 。onNextO 用 于 接收 emitter.onNextO 发 出 的 数 
据 ，onErrorO 用 于 接收 在 ObservableOnSubscribe 的 subscribe0 中 产生 的 异常 ，onComplete0) 用 
于 接收 emitter.onComplete() 发 出 的 事件 ，onSubscribeO 在 订阅 发 生 时 先 被 调用 ， 也 就 是 在 
onNext() 等 方法 之 前 。 

总 之 ， 这 个 Observer 是 用 来 接收 Observable 中 产生 的 数据 的 (这 个 动作 被 称 做 “观察 
Observe" ) ， 可 以 指定 它 运行 于 哪个 线程 。 这 里 没有 指定 ， 于 是 它 就 运行 在 执行 订阅 动作 的 
同一 线程 《Schedulers.compnutation0 ) 中 。 所 以 在 onNext0 中 并 没有 将 传 入 的 Bitmap 显示 在 
ImageView 控件 中 ， 如 果 要 这 样 做 的 话 ， 就 要 指定 观察 动作 发 生 的 线程 为 主线 程 。 要 创建 代表 
主线 程 的 Schedulers 对 象 ， 需 要 依赖 男 一 个 库 : RxAndroid。 所 以 ， 加 入 新 的 依赖 项 


然后 ， 对 代码 稍 做 改动 ， 如 图 17.1.1 所 示 。 


)).subscribeon(Schedulers.computation()) 
.ObserveOn(AndroidSchedulers .mainihread()) 


.subscribe(new Observer«Bitmap»() { 
gOverride 
public void onsubscribe(Disposable d) { 
Log.i( tag: "rxjava", msg: "onSubscribe, "«Thread.cunrentThread( ) .getName( )); 
} 


@Override 
public void onNext(Bitmap bitmap) { -— 


mto [0e]. aiu aries s. nas 
.i("rxjava', "onNext, "« Ihread. currentThread( ).getName ( ) ); 


} 


图 17.1.1 


但 是 ， 现 在 App 是 无 法 正常 运行 的 ， 因 为 我 们 通过 Retrofit 获取 图 像 的 网 站 地 址 变 了 , 我 
们 现在 要 从 地 址 “http://www.tucoo.com/photo/water 02/s/water 05102s.jpg” 下 载 图 像 ， 所 以 要 
修改 接口 ChatService， 改 成 这 样 : 


public interface ChatService { 
GET ("/apis/get message") 
Call«ChatMessage» getChatMsg(); 


/GGET ("/image/a.jpg") 
CGET ("/photo/water 02/s/(file name]") 
Call«ResponseBody» getImage(GPath("file name") String fileName); 


QMultipart 
QPOST ("/") 
Call«ResponseBody» uploadImage(8Part MultipartBody.Part filedata); 


主要 改 了 getImasge0 方 法 ， 由 于 在 地 址 “http:Wwww.tucoo.comy/photo/water 02/s/” 下 有 很 
多 图 像 ， 所 以 把 图 像 文件 名 作为 参数 ， 在 调用 getImage0 方 法 时 由 调用 者 传 进 来 ， 即 这 一 句 : 
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下 面 你 想 办 法 调用 这 段 代码 吧 ， 然 后 运行 App 试 试 ， 图 像 下 载 成 功 了 吗 ? 

你 心里 要 明白 ， 在 Observable 的 subsribe0 方 法 被 调用 之 前 ，ObservableOnSubscribe 的 
subscribe0 方 法 是 不 会 执行 的 ， 是 订阅 动作 触发 了 一 切 ， 在 订阅 发 生 之 前 ， 那 些 方法 只 是 被 设 
置 给 Observabe， 而 不 会 执行 ! 

到 此 为 止 , 我 们 发 现 RxJava 真 的 会 乾坤 大 挪移 ， 因 为 使 用 它 时 ， 我 们 不 用 再 做 创建 线程 ， 
使 用 Handler 回 主 线程 扔 代码 之 类 的 事 ， 但 是 代码 量 还 是 很 多 ， 那 有 没有 办 法 少 码 字 呢 ? AKE 
答案 ， 请 看 下 节 分 解 。 


精简 发 送 代 码 


你 应 该 看 出 来 了 ，Observable 是 发 出 数据 或 事件 的 对 象 ，Observer 是 接收 事件 的 对 象 ， 但 
是 在 到 达 Observer 之 前 ， 数 据 可 以 被 处 理 ， 即 一 种 数据 可 能 被 转换 为 另 一 种 数据 再 传 给 
Oberver。 比 如 下 载 图 像 的 功能 ， 最 初 的 数据 其 实 是 一 个 网 址 〈 字 符 串 ) ， 通 过 对 字符 串 的 处 
理 ( 也 就 是 从 它 指 癌 服务 器 地 址 下 载 图 像 数 据 ， 并 在 收 到 后 转换 为 图 像 〉 数 据 变 成 了 图 像 ， 
Observer 收 到 的 是 最 后 的 数据 ， 也 就 是 图 像 ， 于 是 把 图 像 在 UI 中 显示 出 来 。 按 这 个 理念 可 以 
改写 一 下 上 一 节 的 代码 ， 代 码 如 下 : 


Observable.just("http://www.tucoo.com/") 
.map (new Function«String, Bitmap»() { 
QOverride 
public Bitmap apply(String s) throws Exception { 
//f&l& Retrofit HR, HARR m EPH H 
Retrofit retrofit = new 
Retrofit.Builder().baseUrl(s).build(); 
//Retrofit fRÍERLISEBIZSJEEIESUfI, ZRA Y ZESTURHRCR, 
ChatService service - retrofit.create(ChatService.class); 
Call«ResponseBody» call - 
service.getImage ("water 05102s.jpg"); 
retrofit2.Response«ResponseBody» response = call.execute(); 
//response.body () XX [Hi ResponseBody HR, M E ETEXEIKC— f FE TH 
A V, 


// SNF PIWA E BEKIBDSHTTP body HAR, WARRI — ELI TA 


return 
BitmapFactory.decodeStream(response.body().byteStream()); 
} 
)) 
.subscribeOn (Schedulers.computation()) 
.observeOn(AndroidSchedulers.mainThread()) 
. subscribe (new Observer«Bitmap»() { 
QOverride 
public void onSubscribe (Disposable d) { 


Log. i ("rxjava", "onSubscribe,"+Thread. currentThread() .getName ()); 
QOverride 


public void onNext(Bitmap bitmap) { 
imageViews[0].setImageBitmap (bitmap); 
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) 


QOverride 
public void onError (Throwable e) { 


) 


QOverride 
public void onComplete() { 
Log.i("rxjava","onComplete,"-cThread.currentThread().getName()); 


看 出 哪里 不 同 了 吗 ? Observable 对 象 的 创建 使 用 了 男 一 个 工厂 方法 justO0。justO 表 示 用 数据 
直接 创建 ， 随 后 是 一 个 奇怪 的 方法 map0， 这 个 是 映射 的 意思 ， 就 是 把 一 种 数据 映射 成 男 一 种 
数据 ， 它 的 参数 是 一 个 Function 对 象 ， 这 个 对 象 的 主要 作用 是 包含 回调 方法 apply0， 对 数据 
的 转换 代码 就 写 在 这 个 方法 中 ， 注 意 它 的 返回 值 类 型 和 参数 类 型 ， 必 须 与 Function 的 范 型 参 
数 对 应 : Function<String, Bitmap>， 第 一 个 参数 是 输入 数据 的 类 型 ， 也 就 是 参数 的 类 型 ， 第 二 
个 参数 是 输出 数据 的 类 型 ， 也 就 是 返回 值 类 型 。 方 法 内 的 代码 就 不 做 解释 了 。 

跟前 面 说 过 的 一 样 ， 在 订阅 发 生 之 前 ，map0 方 法 不 会 被 执行 ， 只 是 把 回调 方法 设置 给 
Observable， 当 订阅 发 生 时 (Observable 的 subscribe0 执 行 时 ) ，map0 才 会 被 执行 ，map 返回 
的 数据 ， 最 终 会 被 扔 到 Observer 中 。 方 法 map0O 在 哪个 线程 中 执行 呢 ? 肯定 不 是 在 Observe 线 
程 中 执行 (因为 只 有 Observer 中 的 回调 方法 才 在 Observe 线程 中 执行 )， 那 就 是 在 订阅 线程 中 
执行 了 。 

总 之 RxJava 中 处 理 数 据 的 框架 就 是 一 个 串 ， 串 起 一 个 个 回调 方法 ， 数 据 会 经 过 这 一 个 个 
回调 方法 , 最 后 扔 给 Observer. 实际 上 这 些 回 调 方法 不 一 定 都 是 处 理 数 据 , 有 的 可 以 过 滤 数 据 。 


精简 接收 代码 


Observable 的 subcribe0 方 法 有 多 个 重 载 的 形式 ， 分 别 为 : 


public final Disposable subscribe(); 

public final Disposable subscribe (Consumer<? super T> onNext); 

public final Disposable subscribe (Consumer<? super T> onNext, 
Consumer«? super Throwable» onError); 

public final Disposable subscribe (Consumer<? super T» onNext, 
Consumer<? super Throwable» onError,Action onComplete); 

public final Disposable subscribe (Consumer<? super T> onNext, 
Consumerc? super Throwable» onError,Action onComplete, 
Consumer«? super Disposable» onSubscribe); 


public final void subscribe (Observer«? super T> observer); 


最 后 一 个 是 我 们 用 过 的 。 前 面 几 个 的 参数 类 型 值得 研究 ,有 的 是 Comsumer, 有 的 是 Actoin, 
它们 都 是 什么 呢 ? 它们 其 实 都 包含 了 一 个 回调 方法 ,当然 这 个 回调 方法 才 是 重点 ,根据 参数 的 
名 字 就 可 以 知道 这 个 回调 方法 的 作用 :onNext 对 应 Observer 的 onNext(, onError 对 应 Observer 


401 


Android 9 编程 通俗 演义 


的 onError(), Complete 对 应 Observer 的 onComplete()。 很 多 时 候 我 们 只 需要 提供 onNext 回调 
即 可 ， 所 以 上 一 节 的 代码 可 以 改 为 : 


Observable.just("http://www.tucoo.com/") 
.map (new Function«String, Bitmap»^»() { 
QOverride 
public Bitmap apply(String s) throws Exception { 
//Él& Retrofit HR, HARZ Zu d- PLA 
Retrofit retrofit - new 
Retrofit.Builder().baseUrl(s).build(); 
//Retrofit IKÍEZELISUHWIZSJEEJ&E SCIAI,. IX EH JF EIS TUER, 
ChatService service - retrofit.create(ChatService.class); 
Call«ResponseBody» call - 
service.getImage ("water 05102s.jpg"); 
retrofit2.Response«ResponseBody» response = call.execute(); 
//response.body () iX[dlff]:& ResponseBody HR, M E ETREIXEJK NEH 
A Ül» 
// Z NEBRA MERIR HTTP body HAR, BLUE PS RU —EBIHETE 
return 
BitmapFactory.decodeStream(response.body().byteStream()); 
} 
)) 
.subscribeOn (Schedulers.computation()) 
.observeOn(AndroidSchedulers.mainThread()) 
. subscribe (new Consumer«Bitmap»() { 
QOverride 
public void accept (Bitmap bitmap) throws Exception { 
imageViews[0].setImageBitmap (bitmap); 
} 
)); 


注意 最 后 的 subscribe) 77 1 B] 5512: 


RxJava 5 Lamda 


Lamda 是 从 Javal.8 开始 出 现 的 , 它 出 现 的 原因 非常 明确 :降低 码 字 量 ! 主 要 针对 像 Android 
中 的 事件 侦 听 器 这 样 的 东西 ， 实 际 上 侦 听 器 的 核心 就 是 一 个 回调 方法 ， 由 于 Java 是 纯 面 向 对 
象 的 语言 ， 所 以 为 了 传递 一 个 方法 ， 必 须 用 一 个 类 作为 载体 〈 一 般 的 内 部 匿名 类 ) ， 但 这 太 
TM 麻烦 了 ! 我 们 如 果 使 用 Lamda， 那 么 就 可 以 把 定义 类 的 代码 去 掉 。 那 它们 怎么 用 Lamda 
来 改写 呢 ?” 很 简单 ， 直 接 上 代码 吧 : 


Observable.just("http://www.tucoo.com/") 
.map (url -> ( 


//fl/&& Retrofit WHR, HARR dE PLI AL 
Retrofit retrofit - new Retrofit.Builder().baseUrl(url).build(); 
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//Retrofit INÍETELISUBIZS ZEE AEE SEP, ZA T NESTURHBUR, 

ChatService service - retrofit.create(ChatService.class); 
Call«ResponseBody» call = service.getlImage ("water 05102s.jpg"); 
retrofit2.Response«ResponseBody» response = call.execute(); 


//response. body () BEIHMÆ ResponseBody HR, MEAP NEPA d, 


/ LINEA EIL HTTP body HAR, HÆRRA KHE 
return BitmapFactory.decodeStream(response.body().byteStream()); 


}) 


.Subscribeon (Schedulers.computation()) 
.observeOn(AndroidSchedulers.mainThread()) 
. subscribe (bmp -> imageViews[0].setImageBitmap (bmp)); 


代码 更 少 了 ， 但 是 多 了 一 些 让 人 觉得 另类 的 语法 和 符号 。 首 先 找 出 Lamda 语法 块 ， 被 选 
中 区 域 如 图 17.4.1 所 示 。 


url -> (1 

&Retrofit 7j p IUR IT y PDE 
和 it retrofit = new ind iris, procol bosco belU build(); 
//Retrofit Ri t LJ SCIAS JF PER CP, À "PIE, I 
ChatService service - FECE Es Spouse diode RT 
Call«ResponseBody» call = service.getimage( MEIE "water e51e2s.jpg"); 
retrofit2.Response«R tesponseBody» ien - call eise Aa 14) 
//r ph body 10P 1: Id | KIF BRAH 
y Jd D e 好 fs rE HJ 
ieri Poo ioa pee eam(response. .body() anre 


17.4.1 


这 里 也 是 (如 图 17.4.2 所 示 ) : 


(bmp -> imageViews[O]|.setImageBitmap(bmp) 


17.4.2 


Lamda 的 最 大 特点 就 是 有 “->”。 首 先 要 记 住 ，Lamda 就 是 匿名 函数 ， 函 数 有 的 它 基 本 都 
有 。 函 数 有 四 大 要 素 : KAA, BEKE, SAn Afk, Lamda 其 实 除 了 名 字 ， 其 余 要 素 
都 有 ， 但 是 在 写 的 时 候 能 省 就 省 。 比 如 图 16.4.1 中 ， 箭 头 前 的 url 就 是 参数 ， 它 怎么 没有 类 型 
We? 省 了 ， 因 为 编译 器 可 以 猜 出 来 。 为 什么 能 猜 出 来 呢 ? 首先 我 问 你 能 不 能 猜 出 来 ? 能 ! TELS 
是 输入 数据 的 类 型 ， 就 是 String 嘛 ， 既 然 你 能 猜 出 来 ,编译 器 也 就 能 猜 出 来 。 那 函数 是 有 返回 
值 类 型 的 ，Lamda 中 却 看 不 到 ， 为 什么 呢 ? 因为 还 是 可 以 猜 出 来 啊 ， 从 Lamda 代码 的 返回 数 
据 就 能 猜 出 来 啊 ， 就 是 这 人 句 : 


return BitmapFactory.decodeStream(response.body().byteStream()); 


可 以 猜 出 ， 返 回 的 是 一 个 Bitmap 类 型 。 最 后 可 以 看 到 Lamda 的 代码 也 是 包 在 大 括号 中 。 

再 看 图 17.4.2, 这 个 Lamda 表达 式 更 简单 。 连 大 括号 都 省 了 , 为 什么 ? BARS 只 有 一 句 ， 
所 以 大 括号 就 省 了 ， 其 实 分 号 都 省 了 ， 总 之 就 是 可 以 各 种 省 ， 到 底 有 什么 知识 ， 你 目 己 发 挥 一 
下 想像 力 吧 。 
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你 有 没有 发 现 ， 使 用 Lamda 之 后 ， 连 范 型 都 省 了 了 人。 反正 Lamda 就 这 么 个 东西 ， 也 没什么 
高 深 的 。 但 是 借助 Lamda 3XSUCT FX, RxJava 将 乾坤 大 挪移 练 到 了 第 五 层 。 


map 与 flatmap 


map 用 于 数据 转换 ， 但 它 很 神奇 。 如 果 构 建 Observable 时 ， 传 给 它 的 是 一 堆 数据 而 不 是 
一 条 的 话 ，map 可 以 对 每 一 条 数据 进行 相同 的 转换 ， 然 后 Observer 可 以 接收 转换 后 的 每 一 条 
数据 。 其 实 这 也 没什么 神奇 的 ， 底 层 不 过 是 调用 了 多 次 onNext0 一 条 条 地 扔 出 数据 罢了 。 看 下 
面 这 个 小 例子 : 


Observable.range(1, 10) 
.observeOn(Schedulers.computation()) 


.map (v -> v * v) 
.Subscribe(System.out::printlin); 


解释 一 下 这 段 代 码 ， 使 用 了 另 一 个 工厂 方法 range0 构 建 一 个 Observable 实例 ， 此 工厂 方 
法 的 作用 是 通过 两 个 整数 指定 一 个 范围 ，Observable 会 依次 发 出 这 个 范围 内 的 所 有 整数 。 

mapO 的 参数 是 一 个 Lamda， 表 示 将 参数 v 进行 平方 运算 并 返回 算出 的 值 ， 也 融 是 说 会 对 
每 个 整数 计算 其 平方 。subscribe0 的 参数 不 是 一 个 Lamda， 而 是 一 个 方法 ， 这 个 方法 属于 
System.out， 这 是 Java8 中 新 引入 的 语法 (这 与 C++ 里 面 指定 类 的 成 员 函 数 的 语法 一 样 ! ) 。 
由 于 一 次 扔 给 观察 者 一 个 数据 , 而 println0 方 法 可 以 接收 一 个 参数 ,所 以 以 println0 作 为 onNext 
对 应 的 回调 方法 是 没 问 题 的 。 

但 是 ， 如 果 输 入 的 数据 只 有 一 条 ， 在 处 理 完 这 条 数据 之 后 ， 又 产生 出 了 多 条 数据 ， 而 这 些 
数据 我 们 又 希望 逐条 扔 给 Observer 来 处 理 ， 能 不 能 像 处 理 一 条 数据 一 样 ， 让 RxJava 一 口气 完 
成 这 个 过 程 ? 没 问 题 ! 先 上 代码 再 解释 : 


Observable. just ("http: in tucoo.com/") 
.flatMap(url -> 
// Mois RE m ITE E 
String[] paths = ("water 05102s.jpg", 
"water 05203s.Jjpg", 
"water 05304s.Jjpg", 
"water 05405s.Jjpg", 
"water 05506s.Jjpg", 
"water 05607s.Jjpg", 
"water 05708s.Jjpg", 
"water 05809s.Jjpg", 
"water 05910s.Jjpg"); 
// Él& —f39/) Observeable #8] 
return Observable.fromArray(paths).map(path -> { 
// JÆ Retrofit WHR, ARZ A. d PLA AL 
Retrofit retrofit = new Retrofit. Builder (). baseUrl(url).build(); 
//Retrofit fRÍBTXLISUCHIZS JFÉJ£E SCIhU, ZA I ANISSTUEHRUCR, 
ChatService service - retrofit.create(ChatService.class); 
Call«ResponseBody» call - service.getImage (path); 
retrofit2.Response«ResponseBody» response = call. Sog ped D 
//response.body () PIHI ZÆ ResponseBody HR, M E ETIEXEK— f FE BIalAZL 
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// Z NEPA EK HTTP body HAR, WERKIE 
return BitmapFactory.decodeStream(response.body().byteStream()); 


)); 


}) 


.Subscribeon (Schedulers.computation()) 


a 
. subscribe (bmp -> 
// E SIBITSE : 


imageViews [dowloadlImageCount--*].setImageBitmap (bmp); 


)); 


Observable 的 输入 数据 只 有 一 个 网 站 地 址 ， 而 我 们 要 以 这 个 地 址 为 基础 ， 下 载 9 个 图 片 ， 
如 果 使 用 map 来 处 理 ， 只 能 一 对 一 ， 也 就 是 输入 一 条 数据 ， 处 理 后 输出 一 条 数据 ， 肯 定 不 能 
满足 我 们 的 需求 ， 那 怎么 办 呢 ? 我 们 可 以 选择 一 个 更 神奇 的 方法 : flatMapO0， 也 不 必 太 深究 它 
的 名 字 的 意思 ， 那 是 浪费 精力 ， 理 解 它 的 功能 最 重要 。 它 与 map0 不 同 的 是 ， 设 置 给 它 的 回调 
方法 ， 处 理 完 数据 后 ， 要 构建 一 个 新 的 Observable 对 象 并 返回 之 。 如 果 我 们 在 构造 这 个 新 的 
Observable 时 ， 给 它 传 入 多 条 数据 ， 再 为 这 个 新 的 Observable 设置 map， 在 map 的 回调 方法 
中 处 理 各 条 数据 。 这 样 依然 可 以 在 Observer 中 收 到 每 条 转换 后 的 数据 ， 而 Observer 只 订阅 了 
外 层 的 Observable， 而 没有 订阅 内 部 的 Observable， 是 不 是 很 神奇 啊 ? 原理 就 不 用 管 了 ， 反 正 
这 样 是 能 做 到 的 ， 所 以 你 相信 加 坤 大 挪移 并 非 瀛 得 虚名 了 吧 ? 


L 7.6 并 行 map 


上 一 节 中 的 做 法 是 指定 订阅 在 computation 线程 中 ， 又 指定 了 observe 发 生 在 主线 程 中 ， 
那么 ， 你 有 没有 思考 一 下 ， 这 几 个 图 像 是 并 行 下 载 还 是 串 行 下 载 的 呢 ? 可 能 你 猜 错 了 【一般 都 
会 猜 错 ) ， 其 实 是 串 行 下 载 ， 也 就 是 一 个 下 载 完 了 才 下 载 另 一 个 。 外 部 Observable 虽然 指定 
了 订阅 发 生 在 计算 线程 中 ， 但 是 内 部 Observable 对 应 的 是 外 部 Observable 的 一 条 数据 ， 虽 然 
内 部 Observable 又 产生 了 多 条 数据 ， 但 是 只 能 在 一 个 线程 中 依次 处 理 。 如 果 改 成 并 行 下 载 ， 
应 该 可 以 提高 下 载 速 度 ， 那 如 何 改 成 并 行 下 载 呢 ? 你 应 该 已 经 猜 到 了 ， 只 要 设置 内 部 的 
Observable 的 订阅 线程 即 可 ， 这 太 人 简单 了 : 


增加 这 一 句 之 后 ， 你 会 发 现 图 像 下 载 速度 大 幅 提 高 。 
再 稍微 介绍 一 下 computation 线程 ， 准 确 地 说 ， 它 其 实 是 一 个 线程 池 ， 它 里 面 的 线程 数量 
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是 有 上 限 的 ， 但 是 肯定 多 于 9， 所 以 当 我 们 利用 它 来 下 载 图 像 时 ， 这 9 张 图 像 可 以 同时 下 载 。 
这 段 代 码 也 可 以 这 样 写 ， 效 果 完 全 相同 : 


Observable.just("water 05102s.jpg", 
"water 05203s.jpg", 
"water 05304s.jpg", 
"water 05405s.jpg", 
"water 05506s.jpg", 
"water 05607s.jpg", 
"water 05708s.jpg", 
"water 05809s.jpg", 
"water 05910s.jpg") 
.flatMap(path -> { 
// Mtis FRA FEIR TER IE 
// &ll& — rf) Observeable Hw% e] 
return Observable.just(path).map(p -> { 
// JÆ Retrofit HR, HARA m EVA 
Retrofit retrofit = new 
Retrofit.Builder().baseUrl("http://www.tucoo.com/") .build(); 
//Retrofit IKÍEIELISEUBIZS JEEJeE SUFPI, ZEHA Y EIESTORHRCR, 
ChatService service - retrofit.create(ChatService.class); 
Call«ResponseBody» call - service.getImage (p); 
retrofit2.Response«ResponseBody» response = call.execute(); 
//re spons je. body () 4& [Hf] ResponseBody HR, M E ETE NEPA Ùi 
/ AXIAL EEUU HTTP body HAR, WERKIE 
See r rta dictns mpi cie 
)); 
)) 
.subscribeOn (Schedulers.computation()) 
.oObserveOn(AndroidSchedulers.mainThread()) 
. subscribe (bmp -> { 
// REPENRE EPF 
imageViews [dowloadImageCount++] .setImageBitmap (bmp); 


)); 


不 同 之 处 是 ,此 段 代 码 中 外 层 Observable 己 经 包含 了 多 条 数据 (图 像 路 径 ), 内 部 Observable 
一 次 只 处 理 一 条 数据 〈 图 像 路 径 ) ， 而 且 内 部 Observable 不 需 再 指定 线程 池 了 ， 因 为 外 音 
Observable 已 经 指定 线程 池 了 ， 于 是 每 条 数据 的 处 理 都 会 在 不 同 的 线程 中 执行 。 


RxJava 与 Retrofit 合体 


前 面 的 例子 中 ， 同 时 使 用 了 RxJava 和 Retrofit， 感 觉 还 不 错 ， 没 什么 不 合 谐 ， 但 实际 上 由 

它们 两 情 相 悦 ， 终 于 有 一 天 ,它们 偷偷 地 搞 一 块 …… 合 体 了 ， 好 吧 ， 我 又 不 是 它们 家 长 ， 所 
行 我 对 它们 感情 上 的 事 没什么 意见 ， 并 且 感 觉 还 挺 般配 的 。 

首先 需要 改写 一 下 被 Retrofit 反射 的 Service 接口 ， 改 写 其 中 获取 图 像 的 方法 ， 改 为 下 面 
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GGET ("/photo/water 02/s/{file name}") 


Observable<ResponseBody> getImage (@Path ("file name") String fileName); 


只 有 返回 值 类 型 变 了 ,原先 是 Call<>, 现在 是 Observable- , 也 就 是 说 ,现在 是 通过 Retrofit 
直接 创建 Observable。 但 是 要 让 Retorfit 把 Observable 创建 出 来 ， 需 要 依赖 一 个 库 : 


implementation 'com.squareup.retrofit2:adapter-rxjava2:2.4.0' 
这 个 库 就 能 让 RxJava 与 Retrofit 合体 。 于 是 下 载 图 像 的 代码 变 成 这 样 : 
//f/& Retrofit HR, HARR i EHHA 


Retrofit retrofit = new Retrofit.Builder() 
.baseUrl ("http://www .tucoo.com/") 
//ERZON ZBP} Call, HIT JUIEXSIBIZS X I Observable, 
// UU ATIE Call BWR K Observable 5 Call HAK 
.addCallAdapterFactory (RxJava2CallAdapterFactory.create()) 
 .Duxzldti); 
//Retrofit ÍRÍBfELISUWIZSJEEIJeE SUP, ZEA TIENER, 
ChatService service - retrofit.create(ChatService.class); 
Observable«ResponseBody» observable = service.getImage ("water 05102s.jpg"); 


observable.map(responseBody -> { 
return BitmapFactory.decodeStream(responseBody.byteStream()); 
)).subscribeOn(Schedulers.computation()) 
.oObserveOn(AndroidSchedulers.mainThread()) 
. subscribe (bmp -> { 


// WE SIBIISTER 


imageViews [dowloadImageCount-4-].setImageBitmap (bmp); 


)); 


解释 一 下 的 话 就 是 : 创建 Retrofit Ou f i & CallAdapter) ， 反 射出 ChatService 对 象 ， 
通过 ChatService 对 象 获 取 服 务 端 数据 ， 返 回 的 是 一 个 Observable 对 象 ， 为 Observable 设置 
map 并 订 lë] Observable. 

FERDE, MARAETAI C d e E m EERBHIJETTI FERIE? 欲 知 后 事 如 何 ， 
FENNE o 


RxJava Retrofit 合体 并 行 执行 


其 实 这 个 也 很 简单 ， 我 们 可 以 参考 166 中 的 那 段 代码 的 做 法 ， 创 建 外 层 和 内 层 的 
Observable, 外 层 Observable 处 理 多 条 数据 , 内 层 每 次 只 处 理 一 条 , 所 以 就 可 以 使 用 ChatService 
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.baseUrl ("http: //www.tucoo.com/") 
.addCallAdapterFactory (RxJava2CallAdapterFactory.create()) 
.build(); 

ChatService service - retrofit.create(ChatService.class); 


Observable.just("water 05102s.jpg", 
"water 05203s.jpg", 
"water 05304s.jpg", 
"water 05405s.jpg", 
"water 05506s.jpg", 
"water 05607s.jpg", 
"water 05708s.jpg", 
"water 05809s.jpg", 
"water 05910s.jpg") 


.flatMap(path -> (//2424/8A yi FEET IER TE 
// IAB, xij Observable 
return service.getImage (path).map(responseBody -> { 
// À responseBody X/ RAJK — f -E WA Wi 
//AXUIAREUB AA EENEBL HTTP body HAR, BEXSESÉRIS —EBISETE 
return BitmapFactory.decodeStream(responseBody.byteStream()); 


)); 


)) 
.subscribeOn (Schedulers.computation()) 
.ObserveOn(AndroidSchedulers.mainThread()) 
. subscribe (bmp -> { 
// BESIBIIRTSET 
imageViews [dowloadlImageCount-4-].setImageBitmap (bmp); 


)); 


关键 点 还 是 flatMap0 的 使 用 , 创建 了 内 部 Observable， 它 来 将 路 径 转 换 成 了 Bitmap 对 象 ， 
最 终 扔 给 了 Observer。 

虽然 你 已 领教 了 RxJava 的 辊 坤 大 挪移 ， 但 是 由 于 此 武功 博大 精深 ， 还 有 很 多 细节 ， 我 不 
可 能 说 得 面面俱到 ， 你 还 需 上 自行 探索 、 领 悟 。 

下 面 ， 我 们 还 是 回 到 要 做 的 App 上 ， 为 它 增 加 最 主要 的 一 个 功能 : 多 人 聊天 。 
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前 面 已 经 实现 了 聊天 界面 , 但 还 没有 实现 网 络 通信 。 现在 我 们 终于 可 以 实现 真正 的 聊天 功 
能 了 。 但是, 由 于 要 文 持 多 人 聊天 , 必须 能 区 分 各 聊天 者 , 所 以 每 个 人 都 要 有 唯一 不 同 的 标志 。 
一 般 都 是 在 后 台 服 务 器 中 用 数据 库存 储 聊 天 者 的 信息 ， 所 以 用 数据 表 中 的 ID 列 来 区 分 之 ， 但 
是 我 不 想 实现 得 这 么 复杂 , 我 在 后 台 We 服务 中 , 只 是 用 聊天 者 的 名 字 来 区 分 , 所 以 , 在 App 
中 ， 进 入 聊天 界面 之 前 ， 应 先 为 自己 取 个 名 字 ， 我 们 可 以 利用 App 的 登录 页 面 ， 将 用 户 在 登 
录 框 中 输入 的 用 户 名 直接 在 后 台 注 册 ， 至 于 密码 ， 我们 并 不 关心 ， 所 以 后 台 也 不 记录 密码 。 所 
以 ， 首 先 我 们 要 改进 一 下 登录 的 逻辑 ， 将 登录 名 在 后 台 进 行 注册 。 

但 是 ， 在 此 之 前 ， 其 实 还 有 几 件 事 要 做 : 

(1) 添加 对 retrofit 与 RxJava 的 依赖 ， 以 及 其 他 各 种 依赖 : 


'com.squareup.okhttp3:okhttp:3.10.0' 


implementation 


implementation 


implementation 
implementation 
implementation 
implementation 
implementation 


'com.google.code.gson:gson:2.8.5' 


'com.squareup. 
'com.squareup. 
'io.reactivex. 
'lo.reactivex. 
'com.squareup. 


retrofit2:retrofit:2.4.0' 
retrofit2:converter-gson:2.4.0' 
rxjava2:rxjava:2.1.16' 
rxjava2:rxandroid:2.0.2' 


retrofit2:adapter-rxjava2:2.4.0 


(2) 添加 Retrofit 接口 ChatService: 


package niuedu.com.qqapp.Service; 


public interface ChatService { 


) 


(3) X Activity 类 添加 一 个 Retrofit 对 象 作为 成 员 变量 。 


因为 一 个 Retrofit 对 象 对 应 一 个 服务 端 主机 地 址 ， 所 以 我 们 只 需 在 Activity 中 创建 一 个 对 
象 即 可 ， 这 样 在 各 Fragment 中 就 可 以 使 用 它 : 


public class MainActivity extends AppCompatActivity { 
private Retrofit retrofit; 


在 使 用 它 之 前 创建 出 对 象 ， 比 如 我 放 在 了 onCreate(0 方 法 中 : 


QOverride 
protected void onCreate(Bundle savedInstanceState) { 
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super.onCreate(savedInstanceState); 
setContentView(R.layout.activity main); 
//8l& Retrofit HR 


retrofit = new Retrofit .Builder () 
.baseUrl ("http://10.0.2.2/") 


// TKEELDLZIEARIBEES Call, MTHRÉERBPXĦZK I Observable, 
//BrULU IEEE Call MRH Observable 与 Call AXK 
.addCallAdapterFactory (RxJava2CallAdapterFactory.create()) 
//Json Z8 A 4 f 

.addConverterFactory (GsonConverterFactory.create()) 
.build(); 


但 是 ， 如 何在 Fragment 中 访问 Activity 中 的 变量 呢 ? 有 多 种 方式 ， 比 如 可 以 在 Fragment 
中 调用 getActivity0 获 得 Activity 对 象 再 将 来 型 转换 为 MainActivity, 就 可 以 访问 了 , 但 是 这 样 
做 使 得 Actviity 类 与 Fragment 类 有 很 大 的 厢 合 性 ， 虽 然 一 般 情况 下 这 没有 问题 ， 但 是 看 起 来 
不 够 高 大 上 了 ， 所 以 还 是 按照 推荐 的 方式 : Activity 实现 一 个 接口 ，Fragment 通过 这 个 接口 访 
问 自己 想 要 的 东西 。 所 以 ， 有 了 下 面 这 一 步 。 


(4) 创建 隔离 Activity 与 Fragment 的 接口 。 

这 个 接口 一 般 是 作为 Fragment 类 的 内 部 接口 ， 也 就 是 每 个 Fragment 都 定义 一 个 ， 由 
Activity 去 实现 ， 但 如 果 各 Fragment 都 与 Activity 有 相同 的 交互 动作 ， 那 就 没 必 要 创建 多 个 ， 
所 以 我 们 只 创建 一 个 ， 放 在 单独 的 文件 中 : 

package niuedu.com.qqapp.Service; 
//Activity SAZO, J Fragment RZ 
public interface FragmentListener { 


Retrofit getRetrofit(); 
} 


现在 只 有 一 个 方法 ， 后 面 随时 需要 随时 加 。MainActivity 要 实现 这 个 接口 : 


public class MainActivity extends AppCompatActivity implements FragmentListener 


QOverride 


public Retrofit getRetrofit() { 
return retrofit; 


是 想 调用 这 个 方法 的 Fragment 类 中 ， 都 需要 创建 一 个 成 员 变 量 来 保存 这 个 接口 ， 先 创 
建 变量 : 


private FragmentListener fragmentListener; 


什么 时 候 保 存 下 接口 呢 ? 最 好 的 时 机 就 是 Frgament 刚刚 附着 到 Activity 上 的 时 候 ， 所 以 
重 写 Fragment 的 onAttach() 77 1X: 
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QOverride 
public void onAttach(Context context) { 
super.onAttach (context); 


if (context instanceof FragmentListener)(í 
fragmentListener = (FragmentListener) context; 


} 


那么 当 Fragment 脱离 Activity 的 时 候 ， 要 保证 接口 不 再 有 效 ， 所 以 实现 Fragment 的 
onDettach() 77 1X: 


QOverride 
public void onDetach() { 


super.onDetach(); 
fragmentListener - null; 


好 了 ， 下 面 终于 可 以 实现 业务 功能 了 ! 


改进 登录 功能 


我 们 的 登录 逻辑 是 这 样 的 : App 将 用 户 名 发 送 到 服务 端 (密码 不 处 理 ) ， 服 务 端 查 找 是 否 
有 同名 的 用 户 ， 若 有 ， 则 返回 成 功 ， 藻 没有 ， 则 返回 失败 ， 大 失败 ， 用 户 可 以 继续 使 用 其 他 名 
字 登 录 。 注 意 ， 由 于 服务 端 只 是 将 登录 的 用 户 信 息 保 存在 内 存 中 ， 所 以 当 服 务 端 重启 ， 原 先 的 
用 户 信息 丢失 。 

登录 逻辑 的 改变 还 是 很 大 的 ， 下 面 按 顺 序 一 一 说 明 。 


18.1.1 制定 统一 的 数据 返回 结构 


服务 端 在 啊 应 客户 端 请 求 时 ， 可 能 返回 各 种 数据 ， 比 如 登录 时 ， 知 成 功 束 会 返回 这 个 用 户 
的 信息 〈 失 败 时 不 返回 数据 ) ， 获 取 聊 天 消息 时 返回 消息 的 内 容 和 时 间 等 。 还 要 考虑 出 错 的 情 
况 ， 在 Android 端 ( 即 客户 端 ) 我 们 应 该 先 判断 是 否 出 错 ， 出 错时 要 提示 给 用 户 ， 没 出 错 的 话 
就 处 理 返 回 的 数据 。 服 务 端 创建 了 一 个 类 ,用 于 包含 所 有 这 些 信 息 ， 使 客户 端 可 以 一 致 性 地 处 
理 每 种 返回 数据 ， 这 个 类 取 名 叫 ServerResult， 其 定义 如 下 : 


public class ServerResult«T» { 
// EF 0 EHEGCEBHR, JURIEAUIRTEEIS, ikl, errMsg Hl, BUEH 
private int retCode; 
/ / BITKI 
private String errMsg; 
// REBRE, JUSTE HIZRAT T UE 


private T data; 


public ServerResult(int retCode) { 
this.retCode - retCode; 
} 
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public ServerResult(int retCode, String errMsg) { 
this.retCode - retCode; 
this.errMsg - errMsg; 


} 
public ServerResult(int retCode, String errMsg, T data) { 


this.retCode - retCode; 
this.errMsg - errMsg; 
this.data - data; 

} 

public int getRetCode() { 
return retCode; 

} 

public void setRetCode(int retCode) { 
this.retCode - retCode; 

} 

public String getErrMsg() { 
return errMsg; 

} 

public void setErrMsg(String errMsg) { 
this.errMsg - errMsg; 

} 

public T getData() { 
return data; 

} 

public void setData(T data) { 
this.data - data; 


) 


这 个 类 有 三 个 字段 。data 是 服务 端 返回 的 真正 数据 。retCode 表示 服务 端 处 理 是 否 成 功 ， 
如 果 失 败 ，errmsg 就 会 有 值 ， 它 的 值 是 错误 信息 ， 而 此 时 data 无 值 ; 如 果 成 功 ，errmsg 无 值 ， 
data 有 值 。 还 有 一 点 要 注意 ， 这 个 类 是 一 个 范 型 ， 范 型 参数 是 data 的 类 型 ， 因 为 前 面 说 了 ， 
data 可 能 是 任何 类 型 , 于 是 定义 成 范 型 , 在 使 用 时 再 决定 是 什么 类 型 , 这 样 就 可 以 利用 Retrofit 
的 JSON 转换 能 力 了 ， 如 图 18.1.1.1 所 示 。 


v Weapp 
> 国 manifests 
v B java 
v niuedu.com.qqapp 
» adapter 
> Service 
€ ChatActivity 
€ LoginFragment 
€ MainActivity 
€ MainFragment 
© QQViewPager 
'€ RoundimageView 
© SearchActivity 
€. ServerResult 


€ utils lic" 
J niuedu.com.qqapp (androi t) 


J niuedu.com.qqapp (test) 


18.1.1.1 
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18.1.2 [5] ChatService 中 添加 方法 


public interface ChatService { 
GGET ("/apis/login") 
Observable«cServerResult«ContactInfo»» requestLogin( 


@Query ("name") String name, 
GOuery("password") String password); 


解释 一 下 : "apis/login" ERMIR IRA Ar P Ue] JW: XE iH RAIRE ET TAS BR EÉ E 
Observable 2573, Observable 所 处 理 的 输入 数据 是 ServerResult 类 型 , 注意 ServerResult 是 一 个 
范 型 , 其 范 型 参数 ContactInfo 表示 ServerResult 的 data 字段 的 类 型 。 在 这 里 data 是 ContactInfo 
类 型 ， 这 是 由 服务 端 决 定 的 。 

参数 的 注解 @Query 表示 变量 的 值 以 HTTP. 请 求 参数 的 方式 传 给 服务 端 。 由 于 注解 

“@GET” 指 定 了 以 HTTP GET 方式 发 出 请 求 ， 所 以 参数 值 会 被 放 入 URL 中 ， 假 设 调用 此 方 
法 时 传 入 这 样 的 参数 : 
就 会 形成 这 样 的 URL: “HTTP:// 主 机 地 址 : ys F1/apis/login?name-userl &password-xxx " - 
可 见方 法 的 参数 变 成 了 “key=value ”的 形式 。 其 中 key 是 @Query("name") 中 的 字符 串 
"name" , value 就 是 参数 中 包含 的 值 。 

很 多 时 候 我 们 可 以 在 浏览 器 中 看 到 请 求 的 结果 (很 多 时 候 是 不 可 以 的 , 这 取决 于 服务 端 逻 
辑 )。 在 浏览 器 的 地 址 栏 中 输入 地 址 “http:Wlocalhost:8080/apis/login?name=tom&password=000?”， 
可 以 看 到 这 样 的 结果 : 


{"retCode" :0,"errMsg":null, "data": {"name":"xxx", "status":" 在 线 


", avatar":"image/head/1.png"]] 


这 段 JSON 文本 表示 的 就 是 一 个 ServerResult 对 象 , 它 的 data 字 上 段 保 存 的 是 一 个 ContactInfo 
对 象 。ContactInfo 类 保存 了 联系 人 的 信息 ， 服 务 端 定 义 了 它 ， 并 在 回 客 户 端 返回 数据 时 把 它 
转换 成 了 JSON， 其 定义 是 这 样 的 : 


class ContactInfo implements Serializable[( 
private String avatarURL;//J/$ URL 
private String name; // 名 他 
private String status; //J/4& 


public ContactInfo(String avatar, String name, String status) { 
this.avatarURL - avatar; 
this.name - name; 
this.status - status; 


) 


public String getAvatarURL() { 
return avatarURL; 


) 
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public String getName() { 
return name; 


) 


public String getStatus() { 
return status; 


) 


't 5j ContactsPageListAdapter.ContactInfo 类 几乎 一 样 ， 除 了 表示 头像 的 字段 ， 我 们 需要 采 
用 服务 端的 ContactInfo， 才 能 把 服务 端 传 来 的 JSON 转换 成 ContactInfo 对 象 ， 所 以 把 
ContactsPageListAdapter.ContactInfo 改 成 与 服务 端 一 致 : 


static public class ContactInfo implements Serializable[ 
private String avatarURL;//J/$ URL 
private String name; //ji F 
private String status; //JÁ4& 


public ContactInfo(String avatar, String name, String status) { 
this.avatarURL - avatar; 
this.name - name; 
this.status = status; 


) 


public String getAvatar() ( 
return avatarURL; 


) 


public String getName() { 
return name; 


) 


public String getStatus() { 
return status; 


) 


注意 头像 属性 不 再 是 一 个 Bitmap， 而 是 一 个 路 径 ， 这 个 路 径 是 URL 的 一 部 分 ， 比 如 一 个 
图 像 的 URL 是 “HTTP://10.0.2.2/image/head/1.png”， 那 么 这 个 路 人 径 就 是 “image/head/l .png”。 


2 我 发 现 一 个 问题 ，Gson 不 能 正确 转换 〈 反 序列 化 ) boolean 型 数据 ， 不 知道 以 后 能 不 能 改 


正 。 


18.1.3 ”登录 请 ; 
以 下 是 登录 按钮 点 击 事件 的 处 理 : 
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buttonLogin.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
// DRR LZ BÍ S825 PE Er FOR UJ 
/ LH IUBE. RZ I Ie AERAR. 
String username = editTextQQNum.getText ().toString(); 
//Retrofit fRÍBEIELISUIIZS JE UZ, ZEHA Y AES TCRHROR, 
ChatService service - 
fragmentListener.getRetrofit().create(ChatService.class); 
ObservablecServerResult«ContactInfo»» observable = 
service.requestLogin( 
username,null); 
observable.map(result -> { 
/ / IB AR E iE E LE HAUS [n] 
if (result.getRetCode()--0) { 
/ IRRE IA. NER IPIE 
return result.getData(); 
Jelse( 
// IK Su lf y. IHUDJPS. Æ observer PÍ$ZE- 
throw new RuntimeException(result.getErrMsg()); 
} 
)).subscribeOn(Schedulers.computation()) 
.oObserveOn(AndroidSchedulers.mainThread()) 
. subscribe (contactInfo -> { 
/ / EARI AT, ERE, HAER iK 
FragmentManager fragmentManager = 
getActivity().getSupportFragmentManager(); 
FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 
MainFragment fragment = new MainFragment (); 
// É f&fé FrameLayout 'FJlZif/ Fragment 
fragmentTransaction.replace(R.id.fragment container, 
fragment); 
/ / PEE EA ICA EB EEITH, IET DUE ATB SERI A 2I [n] Ef PUB] 
fragmentTransaction.addToBackStack ("login"); 
fragmentTransaction.commit (); 
], exception -> { 
// EX B IBACERIUP T, PEN RITE 
String errmsg = exception.getLocalizedMessage(); 
Snackbar.make(view, "大王 祸 事 了 :" *terrmsg, Snackbar.LENGTH LONG) 
.SetAction("Action", null).show(); 
exception.printStackTrace(); 


F)? 


} ) 7 


需要 注意 的 一 个 地 方 是 map， 其 回调 方法 的 参数 类 型 由 Observable 二 的 范 型 参数 决定 ， 这 
里 是 ServerResult。 在 回调 中 判断 ServerResult 的 code 属性 是 否 是 0， 如 果 是 ， 说 明 服 务 疹 执 
行 正 确 ， 于 是 返回 ContactInfo 对 象 给 Observer (所 以 subcribe0 方 法 的 第 一 个 参数 Lamda 的 参 
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数 是 ContactInfo) ; 如 果 不 是 0， 说 明 有 和 错 ， 直 接 抛 出 异常 。 那 么 异常 在 哪里 捕获 呢 ?” 你 仔细 
看 一 下 subscribe(0) 方 法 的 参数 ， 是 两 个 回调 方法 (Lamda) ， 第 一 个 是 处 理 数据 的 ， 第 二 个 是 
处 理 异 常 的， 也 就 是 说 ， 有 错时 执行 第 二 个 ， 无 错时 执行 第 一 个 。 在 第 一 个 Lamda 里 面 我 们 
进入 了 主页 面 ， 第 二 个 Lamda 里 面向 用 户 提示 了 错误 。 正 是 这 第 二 个 参数 ， 为 我 们 提供 了 一 
个 统一 的 处 理 异 常 的 地 方 。 试 想 一 下 ， 出 错时 我 们 一 般 是 需要 提示 给 用 户 的 ， 这 就 是 需要 在 主 
线程 中 得 到 异常 对 象 ,在 处 理 数 据 的 过 程 中 , 抛 出 的 异常 都 会 传 到 第 二 个 参数 所 指定 的 方法 中 ， 
只 要 我 们 指定 Observe 发 生 在 主线 程 就 OK 了 ( 见 observeOn(AndroidSchedulers.mainThread()))。 

现在 运行 登录 功能 的 话 ， 真 的 会 有 异常 ! 你 可 以 看 到 错误 信息 提示 ， 如 图 18.1.3.1 所 示 ) 。 


xd: socket failed: FACCFS (Permission 
denied) 


18.1.3.1 


说 明 异 常 处 理 方 法 中 真 的 得 到 了 异常 对 象 。 错误 信息 的 意思 是 “权限 被 否决 ”， 其 实 是 因 
为 App 没有 网 络 (socket) 访问 的 权限 引起 的 ， 这 个 好 解决 ， 只 需 在 Manifest 文件 中 添加 一 句 : 


<?xml versionz"1.0" encoding="utf-8"?> 


«manifest xmlns:androidz"http://schemas.android.com/apk/res/android" 
package-"niuedu.com.qqapp'"» 


android:icon-"Qmipmap/ic launcher" 
android:label-"QQApp" 


那 这 样 就 行 了 吗 ? 不 一 定 ， 还 可 能 出 现 如 图 18.1.3.2 所 示 的 错误 。 


大 王 祸 事 了 : failed to connect to /192.168.3.6 


(port 8080) after 10000ms 


18.132 
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这 是 什么 错误 呢 ? 仔细 翻译 一 下 还 是 不 难 理解 的 :连接 到 某 个 主机 (如 果 你 用 虚拟 机 的 话 ， 
你 的 地 址 应 该 是 10.0.2.2) 超过 10 秒 没 连 上 ， 最 终 连 接 失 败 了 。 造成 如 此 的 原因 可 能 是 主机 网 
络 不 通 《〈 虚 拟 机 不 存在 这 个 问题 ) 或 Web 程序 没 启动 ， 解 决 方案 就 是 确保 主机 与 设备 能 网 络 
连通 并 且 Web 程序 已 正确 启动 。 

还 可 能 出 现 其 他 错误 ,其实 产生 错误 的 原因 很 复杂 多 样 ， 比 如 ，App 没有 网 络 访问 权限 会 
出 异常 ， 有 网 络 访 问 权 限 了 ， 网 络 不 通 也 会 产生 异常 ， 网 络 通 了 ， 服 务 端 没 启动 又 产生 异常 ; 
服务 端 启动 了 ， 服 务 端 如 果 没 有 啊 应 请 求 的 路 径 的 方法 又 出 异常 ; 请 求 的 路 径 对 了 ,业务 迎 辑 
处 理 出 错 也 出 异常 。 并 且 ， 有 的 异常 是 我 们 自己 抛 出 来 的 ， 有 的 是 系统 或 框架 库 抛 出 来 的 。 异 
第 虽然 这 么 多 ， 但 是 由 于 RxJava 为 我 们 提供 了 统一 的 处 理 场 所 ， 所 以 我 们 可 以 轻松 应 对 。 

总 之 ， 当 你 消除 所 有 异常 时 ， 点 击 登 录 就 进入 了 主页 面 。 


18.1.4 ”保存 自己 的 信息 


登录 请 求 返回 的 是 自己 的 信息 ， 需 要 保存 下 来 ， 因 为 在 聊天 时 要 用 。 可 能 有 人 问 了 ， 目 己 
的 信息 是 登录 时 目 己 输入 的 , 直接 在 Android 端 保存 下 来 不 就 完事 了 ， 为 什么 还 要 服务 端 再 返 
回 一 次 ,并且 保存 服务 端 返 回 的 数据 呢 ? 因为 这 是 普遍 的 处 理 方 式 ! 当 你 开发 一 个 大 型 项 目 时 ， 
用 户 信息 是 很 复杂 的 ,不 像 我 们 这 个 例子 里 这 么 简单 ,所 以 当 你 上 传 用 户 名 和 密码 登录 成 功 后 ， 
服务 端 会 把 你 的 用 户 信 息 返 回 给 你 .即使 我 们 这 么 简单 的 类 ,也 有 一 个 字段 的 值 是 服务 端 给 的 ， 
那 就 是 头像 CavatarURL) 。 

这 个 信息 保存 在 哪里 呢 ? 可 以 预见 这 是 各 个 页 面 都 可 能 用 到 的 数据 , 所 以 Activity 就 是 最 
好 的 保存 场所 ， 再 由 于 它 只 有 一 份 ， 也 就 是 个 单 例 , 所 以 可 以 置 成 static。 于 是 为 MainActivity 
类 添加 静态 字段 : 


// RFRA CHITE 


然后 在 获取 到 服务 端 返回 的 信息 后 ， 保 存 下 来 〈 粗 体 语句 ): 


QOverride 

public void onNext(ContactInfo contactInfo) { 
/ IRTE F RBIF 
MainActivity.myInfo = contactInfo; 


/ 1ER RUI AT, ERIR, AER BT 
FragmentManager fragmentManager = 
getActivity ().getSupportFragmentManager (); 


FragmentTransaction fragmentTransaction = 
fragmentManager.beginTransaction(); 

MainFragment fragment = new MainFragment(); 

//É f$ FrameLayout FHA fj Fragment 

fragmentTransaction.replace(R.id.fragment container, fragment); 


/ I MEGUATISACA FEABHEB, XAET UET BRE E SIR IBI E— ELT 


fragmentTransaction.addToBackStack ("login"); 
fragmentTransaction.commit(); 
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18.1.5 ”防止 按钮 重复 点 击 

当前 的 登录 按钮 ， 当 你 快速 重复 点 击 时 ， 它 会 重复 执行 登录 逻辑 ， 发 出 多 次 网 络 请 求 ， 这 显 
然 有 问题 。 我 们 应 该 防止 按钮 频 每 地 重复 啊 应 点 击 事件 ， 借 助 RxJava 很 容易 实现 。 但 是 在 实现 这 
个 功能 前 ， 我 们 先 用 RxJava 的 方式 把 按钮 点 击 事件 的 啊 应 代码 改写 一 下 ， 写 完了 ， 如 下 : 


解释 一 下 这 段 代 码 。RxView 是 为 了 在 Android 的 View 上 使 用 RxJava 而 定义 的 类 ， 有 很 
多 这 样 的 类 ， 都 以 Rx 开头 ， 对 应 着 不 同 的 View， 比 如 对 应 Textview 有 RxTextView。 到 底 使 
用 哪个 类 得 看 情况 ， 虽 然 有 一 个 更 接近 Button 类 的 RxCompoundButton 类 ， 但 是 由 于 我 们 只 
是 啊 应 Click 事件 ， 而 这 个 事件 在 基 类 View 中 就 提供 了 ， 所 以 就 没 必 要 使 用 更 顶端 的 类 了 。 

clicksO 创 建 了 一 个 Observable， 其 参数 是 要 啊 应 的 View 对 象 。 然 后 调用 subscribeO 订 阅 
了 它 ， 订 阅 时 传 入 了 一 个 Lamda 作为 参数 。 

事件 啊 应 变 成 了 RxJava 方式 ， 于 是 防止 重复 啊 应 事件 就 变 得 很 简单 ， 只 需 再 调用 一 个 方 
ik, Wb: 


RxView.clicks(buttonLogin) 
.throttleFirst(10 , TimeUnit. SECONDS) 


.subscribe(... 


throttleFirstO 方 法 表示 在 某 一 段 时 间 内 ， 只 取 第 一 次 事件 ， 这 个 时 间 我 指定 的 是 10 秒 。 

但 是 , 虽然 现在 能 防止 频 勾 啊 应 了 , 却 还 不 完美 , 因为 无 法 做 到 “在 啊 应 过 程 中 不 再 啊 应 ， 
直到 处 理 完 服 务 端 返回 的 数据 再 啊 应 ”的 行为 模式 。 要 达到 这 种 行为 模式 有 多 种 做 法 , 下面 结 
合 进度 条 的 显示 ， 演 示 一 种 做 法 。 欲 知 详情 ， 请 看 下 节 。 


18.1.6 显示 进度 条 


一 般 情况 下 ， 凡 是 耗 时 的 操作 都 要 用 进度 条 或 表示 进度 的 动画 来 提示 用 户 : App 正在 努力 
Pi, DRET, DRH Wee 所 以 我 们 也 要 搞 一 个 。 我 的 思路 是 这 样 的 : 使 用 一 个 
PopupWindow， 显 示 于 主 容器 的 上 面 ， 在 这 个 PopupWindow 上 显示 一 个 圆 的 进度 条 。 进 度 条 
分 两 种 ， 一 种 是 圆 的 ， 一 种 是 长 的 ， 长 的 能 设置 进度 ， 圆 的 就 是 一 直 在 转 ， 看 不 出 进度 ， 因 为 
网 络 操作 无 法 得 到 其 进度 ， 所 以 我 用 圆 的 。 

PopupWindow 是 一 种 Window，Window 是 真正 承载 界面 的 东西 , 你 设置 给 Activity 的 layout， 
最 终 是 显示 在 Window 中 。 所 以 要 在 一 个 页 面 上 和 窗 新 一 层 界 面 ， 最 简单 的 方式 就 是 使 用 Window. 
菜单 也 是 依托 于 PopupWindow 才 显 示 在 其 他 控件 之 上 的 。 这 是 显示 进度 条 的 代码 : 


private void showProgressBar()í 
//XAÀZv—f PopWindow, ftiXf Window 'PÁAZg UE 


// ERE z 


ProgressBar progressBar = new ProgressBar (getContext ()); 
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// REAR BILE E TESTI, BIE UGA EK 

/ / FA dr fel 

popupDialog - new PopupWindow (progressBar, 
ViewGroup.LayoutParams.MATCH PARENT, 
ViewGroup.LayoutParams.MATCH PARENT); 

/ / 16 2 BÍ E BI ORR 409 FBA, LL SCHEEPEAR CIEL AUR 


WindowManager.LayoutParams lp = getActivity().getWindow().getAttributes(); 
lp.alpha = 0.4f; 

getActivity().getWindow().setAttributes (1p); 

/ / BIER R BI LI 

popupDialog.showAtLocation(layoutContext, Gravity.CENTER, 0, 0); 


这 是 隐藏 进度 条 的 代码 : 


private void hideProgressBar()í 
popupDialog.dismiss(); 
WindowManager.LayoutParams lp = getActivity().getWindow().getAttributes(); 
lp.alpha - 1f; 
getActivity().getWindow().setAttributes (1p); 


修改 后 的 登录 业务 代码 如 下 : 


buttonLogin.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View view) { 
// Wf JW LZ BÍ EZ AMBAS PEOR UJ 
/ HB. IIR AE a De AERAR. 
String username = editTextQQNum.getText ().toString(); 
//Retrofit IRÍBIELISUIWZSJE ZL, ZEHA T AES TCRHROK, 
ChatService service - 
fragmentListener.getRetrofit().create(ChatService.class); 
ObservablecServerResult» observable = service.requestLogin( 
username,null); 
observable.map(result -> { 


/ / ZB AE ize LE EAR [RI 


if(result.getRetCode()--0) { 
/ IRRE UAR. ABER IIIA IE: 
return true; 
Jjelse(í 
// I S A HIE I. Mih R E observer fiac 


throw new RuntimeException(result.getErrMsg()); 


} 

)).subscribeOn (Schedulers.computation()) 
.observeOn(AndroidSchedulers.mainThread()) 
.doFinally(() -» hideProgressBar()) 

. subscribe (new Observer«ContactInfo»()í 
QOverride 
public void onSubscribe (Disposable d) { 


/ / RITAR E 
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showProgressBar(); 


} 


QOverride 

public void onNext(Boolean aBoolean) { 
// RF FEL 
MainActivity.myInfo = contactInfo; 


/ / EERU AIT , ERI, EAER K 

FragmentManager fragmentManager = 
getActivity().getSupportFragmentManager (); 

FragmentTransaction fragmentTransaction - 
fragmentManager.beginTransaction(); 

MainFragment fragment = new MainFragment(); 

// Ë FrameLayout FHRA HI Fragment 

fragmentTransaction.replace (R.id.fragment container, 
fragment); 

/ / RR UA CA EAR EE P, IET UEA JTBE A IUS [RI E-NR É 

fragmentTransaction.addToBackStack ("login"); 

fragmentTransaction.commit (); 


) 


QOverride 
public void onError (Throwable e) { 
// E EMAR I, DET RITE 
String errmsg - e.getLocalizedMessage(); 
Snackbar .make(view，" 大 王 祸 事 了 : "-errmsg, 
Snackbar.LENGTH LONG) 
.SetAction("Action", null).show(); 
e.printStackTrace(); 


} 


@Override 
public void onComplete() { 


} ) ; 


粗 体 部 分 是 改动 或 新 增 的 代码 。 首 先 注 意 subscribe0 方 法 的 参数 是 一 个 Observer 对 象 ， 而 
不 是 Lamda， 主 要 是 这 里 要 传 入 太 多 的 Lamda， 看 起 来 很 费劲 ， 所 以 改 为 用 一 个 Observer E 
名 子 类 的 方式 ， 实 现 它 的 几 个 回调 方法 ， 看 起 来 很 清晰 。 我 们 在 onSubscribe0 中 调用 方法 
showProgressBar0 显 示 了 进度 条 ， 在 onError0 中 统一 处 理 异常 ， 在 onComplete0 中 跳 转 到 主页 
面 ， 那 么 隐藏 进度 条 的 代码 在 哪里 呢 ? 当 整 个 过 程 完成 后 ， 不 论 是 成 功 还 是 失败 了 ， 都 应 该 隐 
藏 进度 条 ， 我 们 可 以 在 onEror0 和 onComplete0 中 隐藏 进度 条 ， 但 是 有 个 更 好 的 地 方 : 
Observable 的 doFinally0， 一 看 这 个 名 字 ， 应 该 想到 try...catch 中 的 finally， 是 的 ， 它 们 一 个 德 
TE, 就 是 不 论 成 功 还 是 失败 还 是 取消 都 会 被 执行 , 所 以 这 真是 再 适合 不 过 的 地 方 了 ! doFinally0 
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的 参数 是 一 个 Lamda， 这 个 Lamda 中 调用 了 方法 hideProgressBar0 来 隐 蔬 进度 条 。 
至 此 ， 登 录 功 能 完成 ， 下 一 步 是 实现 网 络 聊天 吗 ? 还 不 是 ， 我 们 应 先 把 联系 人 从 服务 端 
Down 下 来 ， 有 了 联系 人 才能 聊天 。 


3 l| aH 
—— row à 
aM m P EE , H 
"as 0 n. yo 
B GB. Æ 
a" L. .] H8 D 
E ww O A - 


联系 人 这 个 页 面 , 其 实 是 MainFragment 中 的 一 个 Tab 页 ， 当 前 为 它 造 了 一 些 数 据 来 显示 ， 
造 数据 的 方法 是 createContactsPageO0。 我 们 需要 改 一 下 ， 不 再 造 数据 了 ， 修 改 后 变 这 样 : 


private View createContactsPage()í 

// JÆ View 

View v = 
getLayoutInflater().inflate(R.layout.contacts page layout,null); 


/ / EIU PRM EA 


// EIE HT, DABEI TM A., EPIS HEAD null 
ContactsPageListAdapter.GroupInfo groupl-new 
ContactsPageListAdapter.GroupInfo ("特别 关心 ", 0); 
ContactsPageListAdapter.GroupInfo group2-new 
ContactsPageListAdapter.GroupInfo ("我 的 好 友 ", 1)， 
ContactsPageListAdapter.GroupInfo group3-new 
ContactsPageListAdapter.GroupInfo ("Ji ÀR",0); 
ContactsPageListAdapter.GroupInfo group4-new 
ContactsPageListAdapter.GroupInfo (" 家 人 ",0) ; 
ContactsPageListAdapter.GroupInfo group5-new 
ContactsPageListAdapter.GroupInfo (" 同 学 " ,0) ; 


groupNodel-tree.addNode(null,groupl, R.layout.contacts group item); 
groupNode2-tree.addNode (null,group2, R.layout.contacts group item); 
groupNode3-tree.addNode(null,group3, R.layout.contacts group item); 
groupNode4-tree.addNode (null,group4, R.layout.contacts group item); 
groupNode5-tree.addNode(null,group5, R.layout.contacts group item); 


/ / FRR HEH RecyclerView, Jy É/f Adapter 

RecyclerView recyclerView = v.findViewById (R.id.contactListView); 
recyclerView.setLayoutManager (new LinearLayoutManager (getContext ())); 
contactsAdapter - new ContactsPageListAdapter(tree); 
recyclerView.setAdapter (new ContactsPageListAdapter(tree)); 


/ ORRERA HAHA. dEINÍSSEUI 
View fakeSearchView = v.findViewById(R.id.searchViewStub); 
fakeSearchView.setOnClickListener (new View.OnClickListener() { 
QOverride 
public void onClick(View v) { 
Intent intent-new Intent (getContext(),SearchActivity.class); 
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startActivity (intent); 


} 
)); 


return V; 


现在 只 剩 下 组 了 。 我 们 从 服务 端 获取 到 联系 人 后 ， 把 它们 放 到 “我 的 好 友 ” 组 中 。 为 了 方 
便 访 问 组 节点 ， 我 把 groupNode 变量 搞 成 了 MainFragment 的 成 员 变 量 : 


private ListTree.TreeNode 9roupNodel: 
private ListTree.TreeNode groupNode2; 
private ListTree.TreeNode groupNode3; 
private ListTree.TreeNode groupNode4; 
private ListTree.TreeNode groupNodeb5; 


下 一 步 为 Retrofit 接口 添加 新 的 方法 ， 以 实现 从 Web 服务 端 获 取 联 系 人 的 功能 。 


18.2.1 修改 Retrofit 接口 


Web 服务 端 已 经 为 客户 端 提供 了 获取 联系 人 数据 的 地 址 ， 其 路 径 是 “apis/get_contacts”， 
它 返 回 的 当然 是 ServerResult， 但 是 ServerResult 的 data 字段 中 是 一 堆 联 系 人 的 信息 (一 个 数 
组 ) ， 为 了 能 回 这 个 路 径 发 出 请 求 并 获取 数据 ， 我 们 需要 在 ChatService 接口 中 添加 新 方法 : 
getContact(): 


public interface ChatService { 
GGET ("/apis/login") 
ObservablecServerResult«ContactsPageListAdapter.ContactInfo»» 
requestLogin( 
GOuery("name") String name, 
QOuery ("password") String password); 


GET ("/apis/get contacts") 
Observable«cServerResult«List«ContactsPageListAdapter.ContactInfo»»» 
getContacts (); 
} 


然后 就 可 以 调用 它 了 , 调用 代码 放 在 哪里 呢 ? 应 该 放 在 MainFragment 中 ,在 MainFragment 
的 初始 化 时 就 发 出 请 求 比 较 好 。 但 是 ， 这 会 造成 每 次 创建 Fragment 时 都 获取 一 次 联系 人 ， 如 
果 是 联系 人 数量 很 多 ， 这 个 地 方 就 需要 优化 一 下 了 ， 比 如 提供 本 地 缓存 。 还 有 ， 应 该 设置 一 个 
定时 器 ， 每 隔 一 段 时 间 请 求 一 下 所 有 联系 人 信息 ， 这 样 做 的 目的 : 一 是 取得 新 登录 的 联系 人 ， 
二 是 取得 现 有 联系 人 状态 的 变化 〈 比 如 离线 了 ) ; 如 果 联 系 人 很 多 的 话 ， 还 要 考虑 优化 网 络 传 
和 输 ， 每 次 仅 传输 变化 的 数据 ， 等 等 。 仔 细 想 来 要 做 一 个 像 QQ 这 样 复杂 的 聊天 App 其 实 是 很 
烦 殴 的 ， 要 考虑 很 多 细节 ， 我 只 是 市 着 你 玩 玩 这 个 ， 就 不 那么 认 呐 了 。 


18.2.2 RxJava 定时 器 
Android SDK 中 市 定时 如 API， 但 是 我 们 既然 用 了 RxJava， 那 就 用 RxJava 创建 定时 器 。 
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在 Fragment 的 onCreate0) 方 法 中 创建 这 个 定时 器 , 在 定时 器 中 每 间隔 一 段 时 间 请 求 一 下 联 
系 人 列表 。 代 码 如 下 : 


Observable.interval(20,TimeUnit. SECONDS) 
. subscribe ( (Long) -> ( 


/ / E BOERAAI 


)); 
这 段 代 码 的 意思 是 利用 工厂 方法 interval0 创 建 一 个 Observable 对 象 ， 创 建 时 指定 每 隔 20 
秒 onNextO 被 执行 一 次 。 我 们 可 以 把 网 络 请 求 的 代码 放 到 Lamda 中 ， 还 算 简 单 嘛 ! 但 是 ! 对 
不 起 我 要 说 但 是 ! 但 是 这 样 真 的 可 以 吗 ? 你 想 一 想 , 定时 器 到 了 时 间 就 会 调用 回调 方法 从 而 发 
出 网 络 连接 ， 如 果 在 20 秒 内 上 一 次 的 请 求 还 未 执行 完 ， 又 发 出 了 新 的 请 求 ， 是 不 是 不 合理 呢 ? 
所 以 我 们 应 该 保证 在 上 一 次 请 求 执行 完成 后 ， 等 20 秒 再 发 出 下 一 次 请 求 ! 
但 是 ， 对 不 起 我 又 说 但 是 了 ， 但 是 创建 这 样 的 Observable 是 没 问 题 的 ， 因 为 它 就 是 这 样 
工作 的 ,不管 订阅 与 观察 是 否 在 同一 个 线程 中 。 这 之 所 以 这 样 一 惊 一 乍 的 ， 就 是 希望 你 考虑 全 
面 一 点 而 已 。 


18.2.3 ”获取 并 显示 联系 人 


为 了 显示 联系 人 ,必须 调用 Adapter 通知 RecyclerVeiw 更 新 数据 ， 所 以 我 们 先 把 联系 人 页 
面 的 Adpater 保存 成 MainFragment 的 成 员 变量 ; 


private ContactsPageListAdapter contactsAdapter; 
我 们 其 实 要 用 到 两 个 Observable, 定时 器 Observable 是 外 部 Observable, 在 它 的 flagMapO 
中 ， 返 回 Retrofit 反射 出 的 用 于 网 络 访问 的 Observable， 外 部 Observable 负责 执行 定时 任务 ， 
内 部 Observable 在 定时 任务 中 负责 发 出 网 络 请 求 ， 而 最 终 订 阅 到 的 是 内 部 Observable 返回 的 
数据 ， 这 样 就 完成 了 定时 发 出 网 络 请 求 并 进行 处 理 的 任务 。 
QOverride 


public void onCreate(8Nullable Bundle savedInstanceState) { 
super.onCreate (savedInstanceState); 


// &/& —f iE Observable 
Observable.interval(10, TimeUnit. SECONDS) 
.flatMap(v -> { 


/ IRR Sis Ie HL XR OBRA HR IIA R 


ChatService service 


—fragmentListener.getRetrofit().create(ChatService.class); 
return service.getContacts().map(result -> { 
// TERREA IR EIRE, LALIE BI TA CI AREE 
if (result.getRetCode() == 0) { 
return result.getData(); 


) else | 
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throw new RuntimeException(result.getErrMsg()); 
} 
)); 

)).subscribeOn(Schedulers.computation()) 
.observeOn(AndroidSchedulers.mainThread()) 
. subscribe (new Observer«List«ContactsPageListAdapter.ContactInfo»»() { 

QOverride 

public void onSubscribe (Disposable d) { 

} 


QOverride 
public void onNext(List«ContactsPageListAdapter.ContactInfo» 
contactInfos) { 
/ | FEBR A MITES SHUT AE" A 
//IH?ER, MAATHAI AE 


tree.clearDescendant (groupNode2); 
for (ContactsPageListAdapter.ContactInfo info : contactInfos) 
ListTree.TreeNode node2 - tree.addNode (groupNode2, 
info, R.layout.contacts contact item); 


LRAT RAS, TERRÆN, KERER 


node2 .setShowExpandIcon (false); 
} 
//JÀ4l RecyclerView ZWA 
contactsAdapter.notifyDataSetChanged(); 
) 


QOverride 
public void onError (Throwable e) { 
/ / PET TÉ A EL 
String errmsg - e.getLocalizedMessage(); 
Snackbar.make(rootView, "大 王 祸 事 了 : " 十 errmsg, 
Snackbar.LENGTH LONG) 
.SetAction("Action", null).show(); 


) 


QGOverride 
public void onComplete() { 
} 

)); 


HEE PIE, JESCUIRNTZBE I Bio A— Fika flatMapORJ Lamda， 在 其 中 我 们 创建 
了 用 于 网 络 访问 的 Observable 并 返回 , 但 是 在 返回 之 前 , 为 它 设 置 了 map 回调 (一 个 Lamda) , 
这 个 Lamda 的 参数 是 ServerResult<List<ContactsPageListAdapter.ContactInfo>>， 我 们 根据 
ServerResult 的 返回 码 判断 是 否 成 功 ， 如 果 成 功 ， 就 扔 出 List<ContactsPageListAdapter.ContactInfo>， 
于 是 在 观察 者 的 onNext0 中 就 收 到 了 联系 人 List, 我 们 依次 把 List 中 的 每 个 联系 人 加 到 “我 的 
好 友 ” 组 中 ， 也 就 是 groupNode2 节点 中 ， 最 后 通过 Adapter 发 出 通知 ， 使 RecyclerView 重新 
加 载 数据 。 注 意 ， 由 于 是 重新 加 载 所 有 数据 ， 所 以 我 们 需要 先 将 groupNode2 下 的 所 有 子 节 点 
清空 。 

还 有 一 个 问题 ， 就 是 ChatService 对 象 的 创建 。 现 在 的 用 法 在 效率 上 有 问题 ， 因 为 这 个 对 
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象 只 需要 创建 一 次 就 可 以 了 ， 所 以 可 以 把 它 搞 出 MainFragment 的 成 员 变 量 ， 在 Fragment 的 
onCreate0 方 法 中 创建 即 可 。 

但 是 , 现在 还 是 不 完美 , 你 会 发 现 一 旦 出 错 (比如 网 络 访问 失败 )， 定 时 器 就 不 起 作用 了 ! 
这 个 问题 如 何 解决 呢 ? 请 看 下 节 分 解 。 


18.2.4 出 错 重 试 


为 什么 出 错 后 定时 器 就 失效 呢 ? 原因 是 当 Observable 扔 出 错误 事件 时 , 订阅 就 结束 了 。 如 
何 改变 这 个 问题 呢 ? 其 实 很 简单 ， 只 需要 让 Observable 自动 重新 订阅 ， 这 就 要 使 用 RxJava 重 
订阅 机 制 |。 

什么 是 RxJava 重 订 阅 呢 ? 指 的 是 当 Observable 所 包含 的 数据 全 部 处 理 完 成 后 ， 本 该 结束 
这 个 订阅 了 ， 但 是 又 基于 某 些 条 件 重 新 自动 订阅 (执行 Observer 的 subscribe)77; 7X). 的 现象 。 

能 让 Observable 开局 重 订 阅 机 制 的 方法 有 很 多 :repeat(O repeatWhengO \retryO .retry When(). 
repeat 和 retry 的 区 别 是 ，repeat 表示 在 发 出 Complete 事件 时 重新 订阅 (注意 ， 重 订阅 发 生 时 ， 
Observer 的 onComplete() 并 不 会 执行 )， 而 retry 是 发 出 onError 事件 时 才 重 新 订阅 。 

同 理 ，repeatWhen 和 retryWhen0 也 是 这 样 的 区 别 ， 但 由 于 它们 多 了 个 “When“， 所 以 它 
们 是 带 条 件 的 ， 即 在 重 订 阅 发 生前 会 先 判断 条 件 ， 所 以 这 两 个 方法 是 有 参数 的 ， 参 数 是 一 个 回 
调 方法 ， 你 需要 实现 回调 方法 。 

那 我 们 选择 哪个 方法 来 设置 重 订 阅 呢 ? 当然 是 retryO 了， 使 用 方式 很 简单 ， 只 需 为 
Observable 对 象 调 用 retry(): 


intervalObservable.retry().flatMap(v -> ( 
/ / IIR AR 3g De Hl X BU AA PITE HUS 


return service.getContacts().map(result -> { 


/ TER A IRE TES, LAE HI TACIR DARET 


注意 这 里 为 什么 不 用 repeat 站 站)， 其 实 定时 器 本 对 就 是 Repeat， 再 调用 repeat 也 看 不 出 什么 
差别 。 因 为 Repeat 过 到 Error 事件 时 也 会 结束 订阅 ， 而 我 们 需要 不 停 地 刷新 联系 人 的 状态 。 


18.2.5 ”停止 网 络 连 接 


我 们 需要 关注 网 络 连接 断 开 时 机 了 ， 因 为 聊天 页 面 是 一 个 Activity， 所 以 在 进入 聊天 页 面 
时 ，MainActivity 会 进入 后 台 ， 进 入 后 台 束 有 被 Kil 的 危险 ， 而 我 们 的 定时 器 还 在 定时 利用 
Retrofit 癌 服务 端 发 出 请 求 呢 ， 万 一 数据 传 来 了 ，Activity 不 在 了 ， 操 作 界 面 的 代码 就 要 引起 裔 
沉 了 ， 所 以 我 们 需 在 Activity 临 死 前 把 网 络 请 求 停止 ， 也 要 把 定时 从 停止 。 注 意 Retrofit 是 在 
MainActivity 中 创建 的 ， 而 定时 器 是 在 MainFragment 中 创建 的 ， 本 着 不 给 别人 擦 屁股 的 原则 ， 
自己 的 挖 的 坑 需 要 自己 填 ， 所 以 MainFragment 负责 停止 定时 器 ，MainActivity 负责 停止 网 络 
通信 。 

首先 研究 一 下 停止 RxJava 定时 器 ， 停 止 定 时 器 其 实 融 是 停止 取消 订阅 ， 取 消 订 阅 需 要 用 到 
Disposable 对 象 ， 这 个 对 象 需要 在 观察 者 的 onSubscribe0 中 获得 ， 其 参数 就 是 ， 你 需要 做 的 就 是 
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改写 一 下 Observer 的 onSubscribe0) 方 法 ， 在 其 中 保存 下 传 入 的 Disposable XJ $$: 


QOverride 

public void onSubscribe (Disposable d) { 
observableDisposable-d; 

} 


那么 在 哪里 使 用 它 呢 ? 应 该 在 Fragment 的 界面 被 销毁 之 前 ， 参 考 一 下 Fragment 的 生命 周 
期 ， 比 较 好 的 地 方 就 是 onStop0， 当 Fragment 进入 后 台 时 会 调用 onDestroyO0。 所 以 实现 如 下 
代码 : 
QOverride 


public void onStop() ( 
super.onStop(); 


// ff IE RxJava Æ Z8 
observableDisposable.dispose(); 
observableDisposable-null; 


但 是 , 这 市 来 了 一 个 问题 : 创建 定时 器 的 代码 放 在 onCreate0 中 合适 吗 ? 其 实 是 不 合适 的 ， 
因为 与 onStop0 对 应 的 方法 是 onStart0， 而 onCreate0 对 应 的 是 onDestroy0。 执 行 了 onStopO 
之 后 不 一 定 会 执行 onDestroy0， 有 可 能 在 Destroy 之 前 Fragment 又 回来 了 ， 此 时 就 不 会 执行 
onCreate()， 但 肯定 会 执行 onStart0 ， 所 以 ， 局 动 定 时 器 的 地 方 应 该 在 onStart0 中 ! 在 
MainFragment 中 添加 onStart0)， 将 创建 定时 器 Observable 的 那 段 代码 移 过 来 : 

QOverride 

public void onStart() { 
/ / MA ABL CASIMBIRI Zr 
super.onStart(); 


// fl/& —iEPI 2$ Observable 
Observable intervalObservable = Observable.interval(10, TimeUnit. SECONDS); 


下 面 再 整 MainActivity。 但 实际 上 MainActivity 什么 也 不 需要 做 了 ， 因 为 现在 Retrofit 与 
RxJava 结合 了 ， 当 Rxjava 的 订阅 被 取消 了 ， 网 络 连接 即使 不 会 马上 断 开 ， 也 不 会 再 处 理 服务 
端的 数据 了 ， 也 就 不 会 出 现 操作 界面 的 问题 了 。 
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皮 出 聊天 消 


注意 我 们 实现 的 其 实 是 一 个 聊天 室 ， 只 要 连 上 Web 服务 器 的 App， 融 可 以 看 到 所 有 人 发 
出 的 消息 。 当 然 首 先 我 们 要 把 消息 发 出 去 。 如 何 发 呢 ? 原理 很 简单 : 用 服务 端 认 可 的 形式 组 织 
出 消息 对 象 ， 然 后 借助 Retrofit 发 过 去 。 
服务 端 接 收 消 息 的 地 址 是 “/apisupload_ message" . 


18.3.1 定义 承载 消息 的 类 
服务 端 定义 了 一 个 消息 类 ，App 端 也 应 该 使 用 它 承载 消息 数据 : 


public class Message 
private String contactName; //X HAHEI 
private long time; ///e/i EA jJ 
private String content; // HA HAR 


public Message (String contactName, long time, String content) { 
this.contactName - contactName; 
this.time - time; 
this.content - content; 


public String getContactName() { 
return contactName; 


public void setContactName (String contactName) { 
this.contactName - contactName; 


public long getTime() { 
return time; 


public void setTime(long time) { 
this.time = time; 


public String getContent() ( 
return content; 


public void setContent(String content) { 
this.content - content; 
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注意 在 前 面 的 HTTP 通信 的 演示 时 ， 曾 在 ChatActivity 中 创建 了 一 个 ChatMessage 类 ， 现 
在 需要 把 它 去 掉 ， 因 为 我 们 要 使 用 上 面 这 个 类 了 。 去掉 ChatMassage 之 后 会 出 现 一 些 错误 ， 比 
如 ChatActivity 中 有 一 个 List， 存 放 所 有 聊天 消息 ， 它 会 因 找 不 到 范 型 参数 ChatMessage 而 报 
错 ， 你 只 需 改 成 Message 即 可 ， 因 为 我 们 要 用 Message fV ChatMessage。 需 要 注意 的 一 个 地 
方 是 ， 现 在 的 类 中 没有 isMe 这 个 字段 了 ， 所 以 要 判断 一 条 消息 是 不 是 我 发 出 的 ， 需 要 比较 联 
系 人 的 名 字 ， 比 如 在 ChatMessagesAdapter 的 方法 getItemViewType0 中 ， 改 写 为 如 下 代码 CE 
意 加 粗 语句 ) : 

public int getItemViewType (int position) { 
Message message - chatMessages.get (position); 


if (message.getContactName ().equals (MainActivity.myInfo.getName())) { 
/ / RER], AE dE 


return R.layout.chat message right item; 


}elsel 
/ LOL, EEEN 
return R.layout.chat message left item; 


18.3.2 ”在 接口 中 添加 方法 
然后 再 在 ChatService 中 添加 接口 ， 用 于 上 传 消息 ， 见 加 粗 的 代码 : 


public interface ChatService { 
GGET ("/apis/login") 
Observable«cServerResult«ContactsPageListAdapter.ContactInfo»» 
requestLogin( 
QOuery ("name") String name, 
@Query ("password") String password); 


GGET ("/apis/get contacts") 
Observable«cServerResult«List«ContactsPageListAdapter.ContactInfo»»» 
getContacts (); 


GPOST ("/apis/upload message") 
Observable«ServerResult» uploadMessage(?Body Message msg); 


注意 这 个 请 求 是 以 POST 方式 发 出 的 ， 因 为 消息 的 数据 量 太 大 的 话 ，GET 方式 是 容纳 不 
了 的 。 

还 有 ， 这 个 请 求 不 需要 返回 数据 ， 所 以 其 返回 类 型 是 Observable<ServerResult>， 我 们 不 
需要 为 ServerResult 再 设置 范 型 参数 。 

还 有 ， 其 参数 是 Message 对 象 ， 我 们 加 了 注解 “@Body”， 表 示 这 个 参数 要 打包 到 HTTP 
的 Body 中 。 
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18.3.3 在 ChatActivity 中 初始 化 Retrofit 


下 面 我 们 得 转战 ChatActivity 类 了 。 为 此 类 添加 两 个 字段 ， 用 于 Retrofit 网 络 通信 ， 其 具 
体 作 用 不 再 解释 了 : 


/ LIF PRA S 


private Retrofit retrofit; 
private ChatService chatService; 


TE onCreate0 方 法 中 创建 它们 的 实例 : 
//f8/& Retrofit HR 


retrofit = new Retrofit.Builder() 
.baseUrl ("http://10.0.2.2:8080/") 
//AREOJ ZBH Call, HITJUIEXRIIZSTHAE A Observable, 
// UĞ RE Call AWR K Observable 5 Call HAK 
.addCallAdapterFactory (RxJava2CallAdapterFactory.create()) 
//Json Ht AF M 
.addConverterFactory (GsonConverterFactory.create()) 
加 
chatService - retrofit.create(ChatService.class); 


Fri n] EAE TY . 


18.3.4 ”上传 消息 
改写 发 出 消息 按钮 的 响应 代码 ， 先 上 传 消息 再 显示 它 ， 直 接 上 代码 吧 ; 


/ / WAHHH A dr. Mm BE 

findViewById (R.id.buttonSend).setOnClickListener (new View.OnClickListener() 
QOverride 
public void onClick(View view) { 


// MK EditText f?THX B.E 
EditText editText = findViewById(R.id.editMessage); 
String msg - editText.getText().toString(); 


// IE HBR, EBE 
Message chatMessage = new Message (MainActivity.myInfo.getName(), 
new Date().getTime(), msg); 


// EFEJIIEA 3g 


Observable«cServerResult» observable = 


chatService.uploadMessage (chatMessage); 
observable.retry().map(result -> { 

/ / PAUTAS imre E LE HA P 

if (result.getRetCode() == 0) { 
/ IRR DEA IA. BÉTEU [n] PS, fe IETEASIH AER 
return 0; 

) else { 
// LI A lili. MAF R, É observer PMI 
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throw new RuntimeException(result.getErrMsg()); 
} 
)).subscribeOn(Schedulers.computation()) 
.oObserveOn(AndroidSchedulers.mainThread()) 
. subscribe (new Consumer«Object»() (//onNext() 
QOverride 
public void accept (Object data) throws Exception { 
// XI onNext (), THAT Z ET m SR 
] 
}, new Consumer«Throwable»() í(//onError() 
QOverride 
public void accept (Throwable e) throws Exception { 
// XF onError(). [JP ERIR 
String errmsg = e.getLocalizedMessage(); 
Snackbar .make(view，" 大 王 祸 事 了 : " + errmsg, 
Snackbar.LENGTH LONG) 
.SetAction("Action", null).show(); 
} 
}, new Action() ( //onComplete () 
QOverride 
public void run() throws Exception { 


) 
), new Consumer«Disposable»() ( //onSubcribe|() 
GOverride 
public void accept (Disposable disposable) throws Exception { 
// RIEF disposable BHEIR TJ lh 
uploadDisposable - disposable; 


} ) ; 


// SES. MNBEIERecyclerView PZA 
chatMessages.add(chatMessage); 

//1f£ view 'TZZNIIPK. XEÁAURecyclerView, E3r—Íír 
recyclerView.getAdapter().notifyItemInserted(chatMessages.size() 
//iL RecyclerView [M FRA, UB rR HIE 
recyclerView.scrollToPosition(chatMessages.size() - 1); 


现在 测试 一 下 ， 消 息 是 可 以 上 传 到 服务 端的 。 你 可 以 通过 在 浏览 器 中 输入 地 址 
“http://localhost:8080/apis/get_all messages” 来 查看 服务 端 已 有 的 消息 。 注 意 ，subscribe0 方 法 
的 最 后 一 个 参数 : “new Consumer<Disposable>() { //onSubcribe()”， 它 的 方法 中 我 们 将 收 到 
的 Disposable 对 象 保存 了 下 来 :“uploadDisposable = disposable" , 你 可 以 猜 到 uploadDisposable 
是 一 个 字段 ， 是 谁 的 呢 ? 是 ChatActviity 的 。 保 存 它 干什么 ? 前 面 讲 了 ， 是 为 了 在 Activity 7E 
挥 之 前 取消 网 络 操 作 ， 所 以 重 写 ChatActivity 的 onDestroyO 如 下 : 


QOverride 
protected void onDestroy() { 
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super.onDestroy(); 
if(uploadDisposable!-null) { 
uploadDisposable.dispose(); 


uploadDisposable - null; 


但 是 ， 还 没完 ， 你 有 没有 考虑 这 一 样 一 个 问题 : 如 果 上 传 不 成 功 怎么 办 ? 仅 提 示 一 下 错误 


就 行 了 吗 ? 肯定 不 行 ! 我 们 应 该 重新 上 传 ， 不 成 功 再 重 传 …… 直 到 成 功 ， 具 备 这 种 永 不 言 败 精 
神 的 App 才 算 是 一 个 真正 的 App， 那 如 何 才能 成 为 这 样 令 人 敬仰 的 App 呢 ? 下 节 分 解 。 
18.3.5 KME 


实现 失败 重 传 ,有 多 种 方式 ,既然 我 们 已 经 使 用 了 RxJava+Retrofit, 我 们 也 应 该 使 用 RxJava 
的 重 订阅 机 制 实现 失败 重 传 。 还 记得 前 面 讲 的 重新 订阅 吗 ? 我 们 这 里 要 使 用 repeat 还 是 retry 
呢 ?” 我 们 希望 过 到 错误 重新 订阅 ， 如 果 成 功 就 结束 订阅 ， 所 以 应 该 用 retry， 稍 微 改 一 下 代码 : 


observable.retry().map(result -> { 


/ / TB AK AE Juro or LE MEAE [n] 


if (result.getRetCode() == 0) { 


到 此 为 止 ， 发 出 消息 完成 了 ， 下 面 搞定 获取 消息 。 


获取 聊天 消息 


18.4.1 为 ChatService 增加 方法 

获取 消息 与 获取 联系 人 很 相似 ， 都 需要 重复 重复 再 重复 地 访问 Web 服务 器 ， 所 以 我 们 可 
以 把 那 部 分 代码 复制 过 来 ， 修 改 一 下 就 OK 了 。 

Web 服务 端 为 获取 消息 提供 了 请 求 路 径 : /apis/get message， 我 们 为 ChatService 接口 添加 


注意 这 个 方法 有 个 参数 “index”， 它 表示 获取 从 这 个 序号 开始 之 后 所 有 的 消 息 。 因 为 获 
取 的 是 一 堆 消 息 ， 所 以 ServerResult 的 范 型 参数 是 一 个 List. 


18.4.2 发 出 请 求 
在 进入 聊天 页 面 时 ， 应 该 立即 显示 出 已 有 的 聊天 信息 ， 所 以 获取 消息 的 代码 应 该 放 在 
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ChatActivity 的 onCreate0 中 。 而 且 ， 由 于 要 及 时 显示 新 的 消息 ,我们 还 需要 在 间隔 比较 短 的 时 
间 内 重复 获取 ， 这 样 看 来 ， 这 里 的 RxJava 调用 ， 与 登录 时 的 架构 一 样 ， 需 要 两 个 Observable 
配合 。 直 接 上 代码 : 


// SII 2 EPIRI SE I XE — FRR AE 
Observable.interval(2, TimeUnit. SECONDS).flatMap(v -> ( 


// CJZ EE XB EAS Observable 
//£$848 FE Message PIEZ Index 
return chatService.getMessagesFromIndex(chatMessages.size()) 
.map (result -> { 
/ / PAIS A inre E LE HA P 
if (result.getRetCode() == 0) { 
/ / IK A EA IA. BERE In] APR, fe LETRAS AH AER 
return result.getData(); 
) else { 
// IK S ifi. MhF R, E Observer PHMH-Z 
throw new RuntimeException (result.getErrMsg()); 
} 
)); 


}) -retry () 
.Subscribeon (Schedulers.computation()) 
.observeOn(AndroidSchedulers.mainThread()) 
. subscribe (new ConsumercList«Message»»() (//onNext() 
QOverride 
public void accept (List<Message> messages) throws Exception { 
// HB Rn RecyclerView F 
chatMessages.addAll (messages); 
// Æ view 'PMZZNIK. 44] RecyclerView, Vf—Ífr 
recyclerView.getAdapter ().notifyItemRangeInserted( 
chatMessages.size(),chatMessages.size()); 
//iL RecyclerView [HM FRR, Uere 
recyclerView.scrollToPosition(chatMessages.size() - 1); 


, 


} 
}, new Consumer<Throwable>() (//onError(í) 
QOverride 
public void accept (Throwable e) throws Exception { 
[IRERE IN, MLETI 
Log.e("chatactivity",e.getLocalizedMessage ()); 
} 
}, new Action() ( //onComplete () 
QOverride 
public void run() throws Exception { 


} 
}, new Consumer<Disposable>() { //onSubcribe() 
QOverride 


public void accept (Disposable disposable) throws Exception { 
// RIEF downloadDisposable 以 WV 
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downloadDisposable = disposable; 


因为 用 到 了 chatService 变量 , 所 以 这 段 代 码 应 放 在 chatService 被 实例 化 之 后 。 注 意 retry0 
的 调用 时 机 ， 它 必须 放 在 flatMap0 之 后 ， 因 为 flatMap 会 产生 新 的 Observable 对 象 ， 我 们 需 让 
这 个 新 的 Observable 有 retry 机 制 , 最 后 要 注意 一 下 downloadDisposable 变量 , 它 是 ChatActivity 
的 一 个 字段 ， 我 们 保存 它 的 唯一 目的 是 什么 来 着 ? 取消 网 络 访问 ! 所 以 现在 的 onDestroy0 方 
法 是 这 样 的 : 


QOverride 
protected void onDestroy() { 
super.onDestroy(); 
if(uploadDisposable!-null) { 
uploadDisposable.dispose(); 
uploadDisposable - null; 
) 


if(downloadDisposable!-null) { 
downloadDisposable.dispose(); 
downloadDisposable - null; 


好 了 ， 聊 天 功能 到 此 就 实现 了 。 开 局 多 个 虚拟 机 ， 它 们 真 的 可 以 聊天 ! 
虽然 它 还 有 很 多 缺点 ,但 是 它 的 实现 还 是 经 历 了 无 数 困难 和 曲折 ,倾注 我 们 的 心血 和 汗水 ， 
以 后 你 一 定 会 成 为 一 代 Android 高 手 ， 但 我 相信 你 会 怀念 它 的 。 
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